@czi-sds/components 15.2.0 → 15.4.0

package/dist/src/core/Pagination/index.test.js

@@ -1,128 +0,0 @@
-"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var story_utils_1 = require("@chanzuckerberg/story-utils");
-var react_1 = require("@storybook/react");
-var react_2 = require("@testing-library/react");
-var snapshotTestStoryFile = __importStar(require("./index.stories"));
-var index_stories_1 = __importStar(require("./index.stories"));
-// Returns a component that already contain all decorators from story level, meta level and global level.
-var Test = (0, react_1.composeStory)(index_stories_1.Test, index_stories_1.default);
-describe("<Pagination />", function () {
-    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
-    it("renders pagination component", function () {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
-        var elements = react_2.screen.getByTestId("Pagination");
-        expect(elements).toBeTruthy();
-    });
-    it("go to previous page is disabled if currentPage === 1", function () {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
-        var element = react_2.screen.getByTestId("Pagination-disabled-left-arrow");
-        var button = element.getElementsByTagName("button")[0];
-        expect(button.disabled).toBeTruthy();
-    });
-    it("should have a dropdown for left hidden pages list", function () {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
-        var element = react_2.screen.getByTestId("Pagination-with-left-dropdown");
-        var listItem = element.getElementsByTagName("li")[2];
-        var leftMenuButton = listItem.getElementsByTagName("button")[0];
-        expect(leftMenuButton).toBeTruthy();
-    });
-    it("should have a dropdown for right hidden pages list", function () {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
-        var element = react_2.screen.getByTestId("Pagination-with-right-dropdown");
-        var listItem = element.getElementsByTagName("li")[6];
-        var rightMenuButton = listItem.getElementsByTagName("button")[0];
-        expect(rightMenuButton).toBeTruthy();
-    });
-    it("should have a dropdown for both left and right hidden pages list", function () {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
-        var element = react_2.screen.getByTestId("Pagination-with-both-dropdowns");
-        var listItems = element.getElementsByTagName("li");
-        var leftMenuButton = listItems[2].getElementsByTagName("button")[0];
-        var rightMenuButton = listItems[6].getElementsByTagName("button")[0];
-        expect(leftMenuButton && rightMenuButton).toBeTruthy();
-    });
-    it("should open right dropdown on click", function () { return __awaiter(void 0, void 0, void 0, function () {
-        var element, listItem, rightMenuButton;
-        return __generator(this, function (_a) {
-            (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
-            element = react_2.screen.getByTestId("Pagination-with-right-dropdown");
-            listItem = element.getElementsByTagName("li")[6];
-            rightMenuButton = listItem.getElementsByTagName("button")[0];
-            react_2.fireEvent.click(rightMenuButton);
-            expect(react_2.screen.getAllByText("13")).not.toBeNull();
-            return [2 /*return*/];
-        });
-    }); });
-    it("should not open disabled dropdown on click", function () { return __awaiter(void 0, void 0, void 0, function () {
-        var element, listItem, leftMenuButton;
-        return __generator(this, function (_a) {
-            (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
-            element = react_2.screen.getByTestId("Pagination-disabled-dropdown");
-            listItem = element.getElementsByTagName("li")[2];
-            leftMenuButton = listItem.getElementsByTagName("button")[0];
-            expect(leftMenuButton.disabled).toBeTruthy();
-            return [2 /*return*/];
-        });
-    }); });
-});

package/dist/src/core/Pagination/style.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { CommonThemeProps } from "../styles";
-export interface PaginationExtraProps extends CommonThemeProps {
-    sdsStyle?: "round" | "square";
-    disabled?: boolean;
-    selected?: boolean;
-    truncateDropdown?: boolean;
-}
-export declare const StyledPaginationButtonIcon: import("@emotion/styled").StyledComponent<Pick<import("../ButtonIcon/style").ButtonIconExtraProps<keyof import("../ButtonIcon").ButtonIconSizeToTypes> & Omit<import("@mui/material").IconButtonProps, "content" | "autoFocus" | "nonce" | "rel" | "rev"> & import("../ButtonIcon").ButtonIconInternalProps<keyof import("../Icon").IconNameToSizes>, keyof import("@mui/material/OverridableComponent").CommonProps | "onChange" | "children" | "sx" | "color" | "translate" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "name" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "edge" | keyof import("../ButtonIcon/style").ButtonIconExtraProps<keyof import("../ButtonIcon").ButtonIconSizeToTypes> | keyof import("../ButtonIcon").ButtonIconInternalProps<keyof import("../Icon").IconNameToSizes>> & import("react").RefAttributes<HTMLButtonElement | null> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PaginationExtraProps, {}, {}>;
-export declare const StyledPaginationChevronList: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const StyledPaginationChevronButton: import("@emotion/styled").StyledComponent<Pick<import("../ButtonIcon/style").ButtonIconExtraProps<keyof import("../ButtonIcon").ButtonIconSizeToTypes> & Omit<import("@mui/material").IconButtonProps, "content" | "autoFocus" | "nonce" | "rel" | "rev"> & import("../ButtonIcon").ButtonIconInternalProps<keyof import("../Icon").IconNameToSizes>, keyof import("@mui/material/OverridableComponent").CommonProps | "onChange" | "children" | "sx" | "color" | "translate" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "name" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "edge" | keyof import("../ButtonIcon/style").ButtonIconExtraProps<keyof import("../ButtonIcon").ButtonIconSizeToTypes> | keyof import("../ButtonIcon").ButtonIconInternalProps<keyof import("../Icon").IconNameToSizes>> & import("react").RefAttributes<HTMLButtonElement | null> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PaginationExtraProps, {}, {}>;
-export declare const StyledPagination: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PaginationExtraProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const Page: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PaginationExtraProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;

package/dist/src/core/Pagination/style.js

@@ -1,62 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Page = exports.StyledPagination = exports.StyledPaginationChevronButton = exports.StyledPaginationChevronList = exports.StyledPaginationButtonIcon = void 0;
-var styles_1 = require("@mui/material/styles");
-var ButtonIcon_1 = __importDefault(require("../ButtonIcon"));
-var styles_2 = require("../styles");
-var doNotForwardProps = [
-    "sdsStyle",
-    "selected",
-    "onPageChange",
-    "onNextPage",
-    "onPreviousPage",
-    "goToPage",
-    "totalCount",
-    "siblingCount",
-    "currentPage",
-    "pageSize",
-    "truncateDropdown",
-];
-exports.StyledPaginationButtonIcon = (0, styles_1.styled)(ButtonIcon_1.default, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var disabled = props.disabled;
-    var colors = (0, styles_2.getColors)(props);
-    return "\n      width: 32px;\n      height: 32px;\n      cursor: ".concat(disabled ? "auto" : "pointer", ";\n      &:hover {\n        background-color: ").concat(disabled ? "transparent" : colors === null || colors === void 0 ? void 0 : colors.gray[200], ";\n      }\n      & .MuiSvgIcon-root {\n        width: 10px;\n        color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[600], "\n      }\n    ");
-});
-exports.StyledPaginationChevronList = (0, styles_1.styled)("li")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-exports.StyledPaginationChevronButton = (0, styles_1.styled)(ButtonIcon_1.default, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var disabled = props.disabled;
-    var colors = (0, styles_2.getColors)(props);
-    var spaces = (0, styles_2.getSpaces)(props);
-    return "\n      &[data-order=\"first\"] {\n        margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n      }\n      &[data-order=\"last\"] {\n        margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n      }\n      cursor: ").concat(disabled ? "auto" : "pointer", ";\n      &:hover {\n        background-color: transparent;\n      }\n      & .MuiSvgIcon-root {\n        color: ").concat(disabled ? colors === null || colors === void 0 ? void 0 : colors.gray[300] : "black", ";\n      }\n    ");
-});
-exports.StyledPagination = (0, styles_1.styled)("ul", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), styles_2.fontBodyS, function (props) {
-    var typography = (0, styles_2.getTypography)(props);
-    return "\n      font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n      display: flex;\n      flex-wrap: wrap;\n      padding: 0;\n      margin: 0;\n      & li {\n        list-style: none;\n      }\n    ");
-});
-var selectedPageStyle = function () {
-    return "\n    background-color: black;\n    color: white;\n\n    &:hover {\n      background-color: black;\n    }\n  ";
-};
-exports.Page = (0, styles_1.styled)("li", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), styles_2.fontBodyS, function (props) {
-    var selected = props.selected, sdsStyle = props.sdsStyle;
-    var spaces = (0, styles_2.getSpaces)(props);
-    var corners = (0, styles_2.getCorners)(props);
-    var colors = (0, styles_2.getColors)(props);
-    var fontWeights = (0, styles_2.getFontWeights)(props);
-    return "\n      font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n      cursor: pointer;\n      list-style: none;\n      width: 32px;\n      height: 32px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: ").concat(sdsStyle === "round" ? corners === null || corners === void 0 ? void 0 : corners.l : corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      user-select: none;\n      &:hover {\n        background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";\n      }\n\n      &:nth-last-of-type(-n+2) {\n        margin-right: 0;\n      }\n\n      ").concat(selected && selectedPageStyle(), ";\n    ");
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/core/Pagination/usePagination.d.ts

@@ -1,9 +0,0 @@
-export declare const DOTS = "...";
-interface UsePaginationProps {
-    totalCount: number;
-    pageSize: number;
-    siblingCount: number;
-    currentPage: number;
-}
-export declare const usePagination: ({ totalCount, pageSize, siblingCount, currentPage, }: UsePaginationProps) => (number | number[])[] | undefined;
-export {};

package/dist/src/core/Pagination/usePagination.js

@@ -1,69 +0,0 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePagination = exports.DOTS = void 0;
-var react_1 = require("react");
-exports.DOTS = "...";
-var range = function (start, end) {
-    var length = end - start + 1;
-    return Array.from({ length: length }, function (_, idx) { return idx + start; });
-};
-var usePagination = function (_a) {
-    var totalCount = _a.totalCount, pageSize = _a.pageSize, _b = _a.siblingCount, siblingCount = _b === void 0 ? 1 : _b, currentPage = _a.currentPage;
-    return (0, react_1.useMemo)(function () {
-        var totalPageCount = Math.ceil(totalCount / pageSize);
-        // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2*DOTS
-        var totalPageNumbers = siblingCount + 5;
-        /*
-          If the number of pages is less than the page numbers we want to show in our
-          paginationComponent, we return the range [1..totalPageCount]
-        */
-        if (totalPageNumbers >= totalPageCount) {
-            return range(1, totalPageCount);
-        }
-        var leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-        var rightSiblingIndex = Math.min(currentPage + siblingCount, totalPageCount);
-        /*
-          We do not want to show dots if there is only one position left
-          after/before the left/right page count as that would lead to a change of our Pagination
-          component size which we do not want
-        */
-        var shouldShowLeftDots = leftSiblingIndex > 2;
-        var shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
-        var firstPageIndex = 1;
-        var lastPageIndex = totalPageCount;
-        if (!shouldShowLeftDots && shouldShowRightDots) {
-            var leftItemCount = 3 + 2 * siblingCount;
-            var leftRange = range(1, leftItemCount);
-            var rightDotsRange = range(leftItemCount + 1, totalPageCount - 1);
-            return __spreadArray(__spreadArray([], leftRange, true), [rightDotsRange, totalPageCount], false);
-        }
-        if (shouldShowLeftDots && !shouldShowRightDots) {
-            var rightItemCount = 3 + 2 * siblingCount;
-            var rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
-            var leftDotsRange = range(2, totalPageCount - rightItemCount);
-            return __spreadArray([firstPageIndex, leftDotsRange], rightRange, true);
-        }
-        if (shouldShowLeftDots && shouldShowRightDots) {
-            var middleRange = range(leftSiblingIndex, rightSiblingIndex);
-            var leftDotsRange = range(2, leftSiblingIndex - 1);
-            var rightDotsRange = range(rightSiblingIndex + 1, totalPageCount - 1);
-            return __spreadArray(__spreadArray([
-                firstPageIndex,
-                leftDotsRange
-            ], middleRange, true), [
-                rightDotsRange,
-                lastPageIndex,
-            ], false);
-        }
-    }, [totalCount, pageSize, siblingCount, currentPage]);
-};
-exports.usePagination = usePagination;

package/dist/src/core/SegmentedControl/SegmentedControl.namespace-test.d.ts

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

package/dist/src/core/SegmentedControl/SegmentedControl.namespace-test.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("@czi-sds/components");
-var SegmentedControlNameSpaceTest = function (props) {
-    return ((0, jsx_runtime_1.jsx)(components_1.SegmentedControl, { buttonDefinition: [
-            { iconName: "list", tooltipText: "List A" },
-            { iconName: "list", tooltipText: "List B" },
-            { iconName: "table", tooltipText: "Table" },
-            { iconName: "people", tooltipText: "People" },
-        ] }));
-};

package/dist/src/core/SegmentedControl/index.d.ts

@@ -1,15 +0,0 @@
-import { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
-interface SingleButtonDefinition {
-    iconName: string;
-    tooltipText: string;
-}
-interface SegmentedControlExtraProps extends Omit<ToggleButtonGroupProps, "color" | "nonce" | "rev" | "rel" | "autoFocus" | "content"> {
-    buttonDefinition: SingleButtonDefinition[];
-    color?: "primary" | "secondary" | "standard" | "success" | "error" | "info" | "warning" | undefined;
-}
-/**
- * @see https://mui.com/material-ui/react-toggle-button/
- */
-export type SegmentedControlProps = SegmentedControlExtraProps & ToggleButtonGroupProps;
-declare const SegmentedControl: (props: SegmentedControlProps) => JSX.Element;
-export default SegmentedControl;

package/dist/src/core/SegmentedControl/index.js

@@ -1,38 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var ToggleButton_1 = __importDefault(require("@mui/material/ToggleButton"));
-var react_1 = __importDefault(require("react"));
-var Icon_1 = __importDefault(require("../Icon"));
-var Tooltip_1 = __importDefault(require("../Tooltip"));
-var style_1 = require("./style");
-var SegmentedControl = function (props) {
-    var _a;
-    var buttonDefinition = props.buttonDefinition;
-    var leftmost = (_a = buttonDefinition[0]) === null || _a === void 0 ? void 0 : _a.tooltipText;
-    var _b = react_1.default.useState(leftmost), active = _b[0], setActive = _b[1];
-    var handleActive = function (event, newActive) {
-        if (newActive !== null) {
-            setActive(newActive);
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(style_1.StyledSegmentedControl, __assign({ color: "primary", size: "small", value: active, exclusive: true, onChange: handleActive }, props, { children: [buttonDefinition.map(function (button) {
-                var iconName = button.iconName, tooltipText = button.tooltipText;
-                return ((0, jsx_runtime_1.jsx)(ToggleButton_1.default, { "aria-label": tooltipText, disableRipple: true, value: tooltipText, children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: tooltipText, sdsStyle: "dark", arrow: true, children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsIcon: iconName, sdsSize: "s", sdsType: "button" }) }) }) }, tooltipText));
-            }), ";"] })));
-};
-exports.default = SegmentedControl;

package/dist/src/core/SegmentedControl/index.stories.d.ts

@@ -1,49 +0,0 @@
-import { Args } from "@storybook/react";
-import { SegmentedControlProps } from "./index";
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
-export default _default;
-interface SegmentedControlArgs extends SegmentedControlProps {
-    segmentOneIcon: string;
-    segmentOneTooltipText: string;
-    segmentTwoIcon: string;
-    segmentTwoTooltipText: string;
-    segmentThreeIcon: string;
-    segmentThreeTooltipText: string;
-    segmentFourIcon: string;
-    segmentFourTooltipText: string;
-}
-export declare const Default: {
-    args: {
-        segmentFourIcon: string;
-        segmentFourTooltipText: string;
-        segmentOneIcon: string;
-        segmentOneTooltipText: string;
-        segmentThreeIcon: string;
-        segmentThreeTooltipText: string;
-        segmentTwoIcon: string;
-        segmentTwoTooltipText: string;
-    };
-    render: (props: SegmentedControlArgs) => JSX.Element;
-};
-export declare const LivePreview: {
-    parameters: {
-        snapshot: {
-            skip: boolean;
-        };
-    };
-    render: (args: Args) => JSX.Element;
-};
-export declare const Test: {
-    args: {
-        buttonDefinition: {
-            iconName: string;
-            tooltipText: string;
-        }[];
-    };
-    parameters: {
-        snapshot: {
-            skip: boolean;
-        };
-    };
-    render: (args: Args) => JSX.Element;
-};

package/dist/src/core/SegmentedControl/index.stories.js

@@ -1,128 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Test = exports.LivePreview = exports.Default = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var index_1 = __importDefault(require("./index"));
-var SegmentedControl = function (props) {
-    var buttonDefinition = props.buttonDefinition;
-    return (0, jsx_runtime_1.jsx)(index_1.default, { buttonDefinition: buttonDefinition });
-};
-var iconOptions = ["list", "infoCircle", "table", "globe", "people"];
-exports.default = {
-    argTypes: {
-        segmentFourIcon: {
-            control: { type: "select" },
-            options: iconOptions,
-        },
-        segmentFourTooltipText: {
-            control: {
-                type: "text",
-            },
-        },
-        segmentOneIcon: {
-            control: { type: "select" },
-            options: iconOptions,
-        },
-        segmentOneTooltipText: {
-            control: {
-                type: "text",
-            },
-        },
-        segmentThreeIcon: {
-            control: { type: "select" },
-            options: iconOptions,
-        },
-        segmentThreeTooltipText: {
-            control: {
-                type: "text",
-            },
-        },
-        segmentTwoIcon: {
-            control: { type: "select" },
-            options: iconOptions,
-        },
-        segmentTwoTooltipText: {
-            control: {
-                type: "text",
-            },
-        },
-    },
-    component: SegmentedControl,
-    title: "SegmentedControl",
-};
-var Template = function (props) {
-    var segmentOneIcon = props.segmentOneIcon, segmentOneTooltipText = props.segmentOneTooltipText, segmentTwoIcon = props.segmentTwoIcon, segmentTwoTooltipText = props.segmentTwoTooltipText, segmentThreeIcon = props.segmentThreeIcon, segmentThreeTooltipText = props.segmentThreeTooltipText, segmentFourIcon = props.segmentFourIcon, segmentFourTooltipText = props.segmentFourTooltipText;
-    var buttonDefinition = [
-        { iconName: segmentOneIcon, tooltipText: segmentOneTooltipText },
-        { iconName: segmentTwoIcon, tooltipText: segmentTwoTooltipText },
-        { iconName: segmentThreeIcon, tooltipText: segmentThreeTooltipText },
-        { iconName: segmentFourIcon, tooltipText: segmentFourTooltipText },
-    ];
-    return (0, jsx_runtime_1.jsx)(index_1.default, { buttonDefinition: buttonDefinition });
-};
-// Default
-exports.Default = {
-    args: {
-        segmentFourIcon: "list",
-        segmentFourTooltipText: "List D",
-        segmentOneIcon: "list",
-        segmentOneTooltipText: "List A",
-        segmentThreeIcon: "list",
-        segmentThreeTooltipText: "List C",
-        segmentTwoIcon: "list",
-        segmentTwoTooltipText: "List B",
-    },
-    render: Template,
-};
-// Live Preview
-var livePreviewStyles = {
-    columnGap: "24px",
-    display: "flex",
-};
-function LivePreviewDemo(props) {
-    var finalProps = __assign(__assign({}, props), { style: { width: "250px" } });
-    return ((0, jsx_runtime_1.jsx)("div", { style: livePreviewStyles, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Template, __assign({ segmentOneIcon: "list", segmentOneTooltipText: "List A", segmentTwoIcon: "list", segmentTwoTooltipText: "List B", segmentThreeIcon: "list", segmentThreeTooltipText: "List C", segmentFourIcon: "list", segmentFourTooltipText: "List D", buttonDefinition: [] }, finalProps)) }) }));
-}
-exports.LivePreview = {
-    parameters: {
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
-};
-// Test
-var TestDemo = function (props) {
-    var buttonDefinition = props.buttonDefinition;
-    return ((0, jsx_runtime_1.jsx)(index_1.default, __assign({ buttonDefinition: buttonDefinition, "data-testid": "segmentedControl" }, props)));
-};
-exports.Test = {
-    args: {
-        buttonDefinition: [
-            { iconName: "list", tooltipText: "List A" },
-            { iconName: "list", tooltipText: "List B" },
-            { iconName: "table", tooltipText: "Table" },
-            { iconName: "people", tooltipText: "People" },
-        ],
-    },
-    parameters: {
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (args) { return (0, jsx_runtime_1.jsx)(TestDemo, __assign({}, args)); },
-};

package/dist/src/core/SegmentedControl/index.test.d.ts

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

package/dist/src/core/SegmentedControl/index.test.js

@@ -1,41 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var story_utils_1 = require("@chanzuckerberg/story-utils");
-var react_1 = require("@storybook/react");
-var react_2 = require("@testing-library/react");
-var snapshotTestStoryFile = __importStar(require("./index.stories"));
-var index_stories_1 = __importStar(require("./index.stories"));
-// Returns a component that already contain all decorators from story level, meta level and global level.
-var Test = (0, react_1.composeStory)(index_stories_1.Test, index_stories_1.default);
-describe("<SegmentedControl />", function () {
-    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
-    it("renders Segmented Control component", function () {
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
-        var elements = react_2.screen.getAllByTestId("segmentedControl");
-        expect(elements.length).toBeTruthy();
-    });
-});

package/dist/src/core/SegmentedControl/style.d.ts

@@ -1,2 +0,0 @@
-import { CommonThemeProps } from "../styles";
-export declare const StyledSegmentedControl: import("@emotion/styled").StyledComponent<import("@mui/material/ToggleButtonGroup").ToggleButtonGroupProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & CommonThemeProps, {}, {}>;