@czi-sds/components 15.3.0 → 15.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/components",
-  "version": "15.3.0",
+  "version": "15.4.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": {
@@ -68,5 +68,5 @@
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1"
   },
-  "gitHead": "88dd9ff8f6293e117aed55ce1284661bafb3a1f5"
+  "gitHead": "3323fd8f1fe30734783d5467492f3863e24bc24e"
 }

package/dist/src/common/helpers/scrollStop.d.ts

@@ -1,8 +0,0 @@
-/**
- * Custom hook that listens for scroll stop events and triggers a callback function.
- *
- * @param callback - The callback function to be executed when scrolling stops.
- * @param timeout - The duration (in milliseconds) after which the callback is triggered when scrolling stops. Default is 50ms.
- */
-declare const useScrollStopListener: (callback: () => void, timeout?: number) => void;
-export default useScrollStopListener;

package/dist/src/common/helpers/scrollStop.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-/**
- * Creates a scroll stop listener with a given callback and timeout.
- *
- * @param callback - The callback function to be executed when scrolling stops.
- * @param timeout - The duration (in milliseconds) after which the callback is triggered when scrolling stops. Default is 50ms.
- * @returns A function to destroy the scroll stop listener and clean up the event listener.
- */
-var createScrollStopListener = function (callback, timeout) {
-    if (timeout === void 0) { timeout = 50; }
-    var removed = false;
-    var handle = null;
-    var onScroll = function () {
-        if (handle) {
-            clearTimeout(handle);
-        }
-        handle = setTimeout(callback, timeout);
-    };
-    // Attach scroll event listener to the specified element
-    document.addEventListener("scroll", onScroll, true);
-    return function () {
-        if (removed) {
-            return;
-        }
-        removed = true;
-        if (handle) {
-            clearTimeout(handle);
-        }
-        // Remove the scroll event listener from the element
-        document.removeEventListener("scroll", onScroll);
-    };
-};
-/**
- * Custom hook that listens for scroll stop events and triggers a callback function.
- *
- * @param callback - The callback function to be executed when scrolling stops.
- * @param timeout - The duration (in milliseconds) after which the callback is triggered when scrolling stops. Default is 50ms.
- */
-var useScrollStopListener = function (callback, timeout) {
-    if (timeout === void 0) { timeout = 50; }
-    var callbackRef = (0, react_1.useRef)();
-    callbackRef.current = callback;
-    (0, react_1.useEffect)(function () {
-        var destroyListener = createScrollStopListener(function () {
-            if (callbackRef.current) {
-                callbackRef.current();
-            }
-        }, timeout);
-        return function () { return destroyListener(); };
-    }, []);
-};
-exports.default = useScrollStopListener;

package/dist/src/common/storybookConstants.d.ts

@@ -1,3 +0,0 @@
-export interface Template {
-    args: Record<string, never>;
-}

package/dist/src/common/storybookConstants.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/common/utils.d.ts

@@ -1,2 +0,0 @@
-export declare const noop: () => void;
-export declare const toKebabCase: (str: string) => string;

package/dist/src/common/utils.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toKebabCase = exports.noop = void 0;
-var noop = function () { };
-exports.noop = noop;
-var toKebabCase = function (str) {
-    return str.replace(/[\s_]+/g, "-").toLowerCase();
-};
-exports.toKebabCase = toKebabCase;

package/dist/src/common/warnings.d.ts

@@ -1,10 +0,0 @@
-export declare enum SDSWarningTypes {
-    ButtonMissingSDSProps = "buttonMissingProps",
-    ChipDeprecated = "chipDeprecated",
-    MenuSelectDeprecated = "menuSelectDeprecated",
-    ButtonIconMediumSize = "buttonIconMediumSize",
-    TooltipSubtitle = "tooltipSubtitle",
-    TooltipWidth = "tooltipWidth",
-    TooltipInverted = "tooltipInverted"
-}
-export declare const showWarningIfFirstOccurence: (warningType: SDSWarningTypes) => void;

package/dist/src/common/warnings.js

@@ -1,60 +0,0 @@
-"use strict";
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.showWarningIfFirstOccurence = exports.SDSWarningTypes = void 0;
-var SDSWarningTypes;
-(function (SDSWarningTypes) {
-    SDSWarningTypes["ButtonMissingSDSProps"] = "buttonMissingProps";
-    SDSWarningTypes["ChipDeprecated"] = "chipDeprecated";
-    SDSWarningTypes["MenuSelectDeprecated"] = "menuSelectDeprecated";
-    SDSWarningTypes["ButtonIconMediumSize"] = "buttonIconMediumSize";
-    SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
-    SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
-    SDSWarningTypes["TooltipInverted"] = "tooltipInverted";
-})(SDSWarningTypes || (exports.SDSWarningTypes = SDSWarningTypes = {}));
-var SDS_WARNINGS = (_a = {},
-    _a[SDSWarningTypes.ButtonMissingSDSProps] = {
-        hasWarned: false,
-        message: "Warning: Buttons without sdsStyle or sdsType props will be deprecated.",
-    },
-    _a[SDSWarningTypes.ChipDeprecated] = {
-        hasWarned: false,
-        message: "Warning: <Chip /> will be deprecated and replaced with <Tag />",
-    },
-    _a[SDSWarningTypes.MenuSelectDeprecated] = {
-        hasWarned: false,
-        message: "Warning: MenuSelect will be deprecated and replaced with <DropdownMenu />",
-    },
-    _a[SDSWarningTypes.ButtonIconMediumSize] = {
-        hasWarned: false,
-        message: "Warning: A medium size ButtonIcon can only be of type tertiary!",
-    },
-    _a[SDSWarningTypes.TooltipSubtitle] = {
-        hasWarned: false,
-        message: "Warning: The 'subtitle' text is only available for dark tooltips!",
-    },
-    _a[SDSWarningTypes.TooltipWidth] = {
-        hasWarned: false,
-        message: "Warning: The 'wide' width is only available for light tooltips!",
-    },
-    _a[SDSWarningTypes.TooltipInverted] = {
-        hasWarned: false,
-        message: "Warning: Tooltips using the inverted prop will be deprecated. Please use sdsStyle: 'dark' | 'light' instead!",
-    },
-    _a);
-var showWarningIfFirstOccurence = function (warningType) {
-    if (!(warningType in SDS_WARNINGS)) {
-        // add undefined warning to prevent multiple warnings
-        SDS_WARNINGS[warningType] = {
-            hasWarned: false,
-            message: "Warning: SDSWarningType ".concat(warningType, " is not defined in SDS_WARNINGS"),
-        };
-    }
-    if (SDS_WARNINGS[warningType].hasWarned) {
-        return;
-    }
-    // eslint-disable-next-line no-console
-    console.warn(SDS_WARNINGS[warningType].message);
-    SDS_WARNINGS[warningType].hasWarned = true;
-};
-exports.showWarningIfFirstOccurence = showWarningIfFirstOccurence;

package/dist/src/common/warnings.test.d.ts

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

package/dist/src/common/warnings.test.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var warnings_1 = require("src/common/warnings");
-describe("showWarningIfFirstOccurence", function () {
-    var consoleWarnSpy;
-    beforeEach(function () {
-        consoleWarnSpy = jest.spyOn(console, "warn");
-    });
-    it("shows warning on first call", function () {
-        (0, warnings_1.showWarningIfFirstOccurence)(warnings_1.SDSWarningTypes.ChipDeprecated);
-        expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
-    });
-    it("does not show warning on subsequent calls", function () {
-        (0, warnings_1.showWarningIfFirstOccurence)(warnings_1.SDSWarningTypes.ChipDeprecated);
-        (0, warnings_1.showWarningIfFirstOccurence)(warnings_1.SDSWarningTypes.ChipDeprecated);
-        (0, warnings_1.showWarningIfFirstOccurence)(warnings_1.SDSWarningTypes.ChipDeprecated);
-        expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
-    });
-});

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

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

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

@@ -1,18 +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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("@czi-sds/components");
-var AccordionNameSpaceTest = function (props) {
-    return ((0, jsx_runtime_1.jsx)(components_1.Accordion, __assign({}, props, { useDivider: true, togglePosition: "right", id: "accordion-id" })));
-};

package/dist/src/core/Accordion/__snapshots__/index.test.js.snap

@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Accordion /> Default story renders snapshot 1`] = `
-<div
-  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-1x3fmw6-MuiPaper-root-MuiAccordion-root"
->
-  <div
-    aria-controls="undefined-header-panel-content"
-    aria-expanded="false"
-    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-q39ari-MuiButtonBase-root-MuiAccordionSummary-root"
-    id="undefined-header"
-    role="button"
-    tabindex="0"
-  >
-    <div
-      class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-o4b71y-MuiAccordionSummary-content"
-    >
-      Accordion Header
-    </div>
-    <div
-      class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
-    >
-      <div
-        class="css-1ft6wgl"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
-          data-jest-file-name="IconChevronDownSmall.svg"
-          data-jest-svg-name="IconChevronDownSmall"
-          data-testid="IconChevronDownSmall"
-          fillcontrast="white"
-          focusable="false"
-          viewBox="0 0 14 14"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
-    style="min-height: 0px;"
-  >
-    <div
-      class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
-    >
-      <div
-        class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
-      >
-        <div
-          aria-labelledby="undefined-header"
-          class="MuiAccordion-region"
-          role="region"
-        >
-          <div
-            class="MuiAccordionDetails-root css-rnrgul-MuiAccordionDetails-root"
-          >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/dist/src/core/Accordion/components/AccordionDetails/index.d.ts

@@ -1,3 +0,0 @@
-import { AccordionDetailsProps } from "@mui/material";
-declare const AccordionDetails: (props: AccordionDetailsProps) => JSX.Element;
-export default AccordionDetails;

package/dist/src/core/Accordion/components/AccordionDetails/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var style_1 = require("./style");
-var AccordionDetails = function (props) {
-    var children = props.children;
-    return (0, jsx_runtime_1.jsx)(style_1.StyledAccordionDetails, { children: children });
-};
-exports.default = AccordionDetails;

package/dist/src/core/Accordion/components/AccordionDetails/style.d.ts

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

package/dist/src/core/Accordion/components/AccordionDetails/style.js

@@ -1,16 +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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledAccordionDetails = void 0;
-var react_1 = require("@emotion/react");
-var material_1 = require("@mui/material");
-var styles_1 = require("@mui/material/styles");
-var styles_2 = require("src/core/styles");
-exports.StyledAccordionDetails = (0, styles_1.styled)(material_1.AccordionDetails)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), styles_2.fontBodyS, function (props) {
-    var spaces = (0, styles_2.getSpaces)(props);
-    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: ", "px;\n      padding-top: ", "px;\n    "], ["\n      padding: ", "px;\n      padding-top: ", "px;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
-});
-var templateObject_1, templateObject_2;

package/dist/src/core/Accordion/components/AccordionHeader/index.d.ts

@@ -1,7 +0,0 @@
-import { AccordionSummaryProps as RawAccordionSummaryProps } from "@mui/material";
-export interface SdsAccordionHeaderProps {
-    subtitle?: string;
-}
-export type AccordionHeaderProps = RawAccordionSummaryProps & SdsAccordionHeaderProps;
-declare const AccordionHeader: (props: AccordionHeaderProps) => JSX.Element;
-export default AccordionHeader;

package/dist/src/core/Accordion/components/AccordionHeader/index.js

@@ -1,13 +0,0 @@
-"use strict";
-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 Icon_1 = __importDefault(require("src/core/Icon"));
-var style_1 = require("./style");
-var AccordionHeader = function (props) {
-    var children = props.children, id = props.id, subtitle = props.subtitle;
-    return ((0, jsx_runtime_1.jsxs)(style_1.StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsIcon: "chevronDown", sdsSize: "s", sdsType: "static" }), children: [children, subtitle && (0, jsx_runtime_1.jsx)(style_1.StyledSubtitle, { children: subtitle })] }));
-};
-exports.default = AccordionHeader;

package/dist/src/core/Accordion/components/AccordionHeader/style.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import { CommonThemeProps } from "src/core/styles";
-export declare const StyledAccordionHeader: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").AccordionSummaryClasses> | undefined;
-    expandIcon?: import("react").ReactNode;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, {}, {}>;
-export declare const StyledSubtitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;

package/dist/src/core/Accordion/components/AccordionHeader/style.js

@@ -1,21 +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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledSubtitle = exports.StyledAccordionHeader = void 0;
-var react_1 = require("@emotion/react");
-var material_1 = require("@mui/material");
-var styles_1 = require("@mui/material/styles");
-var styles_2 = require("src/core/styles");
-exports.StyledAccordionHeader = (0, styles_1.styled)(material_1.AccordionSummary)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), styles_2.fontHeaderS, function (props) {
-    var spaces = (0, styles_2.getSpaces)(props);
-    var colors = (0, styles_2.getColors)(props);
-    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: ", "px;\n      min-height: 40px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      &.Mui-expanded {\n        min-height: 40px;\n      }\n\n      .MuiAccordionSummary-content {\n        margin: 0;\n        flex-direction: column;\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n      }\n\n      .MuiAccordionSummary-expandIconWrapper {\n        padding: 0px;\n        margin-right: 0;\n        margin-left: ", "px;\n        svg {\n          color: ", ";\n        }\n      }\n    "], ["\n      padding: ", "px;\n      min-height: 40px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      &.Mui-expanded {\n        min-height: 40px;\n      }\n\n      .MuiAccordionSummary-content {\n        margin: 0;\n        flex-direction: column;\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n      }\n\n      .MuiAccordionSummary-expandIconWrapper {\n        padding: 0px;\n        margin-right: 0;\n        margin-left: ", "px;\n        svg {\n          color: ", ";\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
-});
-exports.StyledSubtitle = (0, styles_1.styled)("p")(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), styles_2.fontBodyXxs, function (props) {
-    var colors = (0, styles_2.getColors)(props);
-    return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      margin: 0;\n    "], ["\n      color: ", ";\n      margin: 0;\n    "])), colors === null || colors === void 0 ? void 0 : colors.gray[500]);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,12 +0,0 @@
-import { AccordionProps as RawAccordionProps } from "@mui/material";
-import React from "react";
-import AccordionDetails from "./components/AccordionDetails";
-import AccordionHeader from "./components/AccordionHeader";
-import { AccordionExtraProps } from "./style";
-export { AccordionDetails, AccordionHeader };
-export type AccordionProps = Omit<RawAccordionProps, "nonce" | "rev" | "rel" | "autoFocus" | "content"> & AccordionExtraProps;
-/**
- * @see https://mui.com/material-ui/react-accordion/
- */
-declare const Accordion: React.ForwardRefExoticComponent<Pick<AccordionProps, keyof import("@mui/material/OverridableComponent").CommonProps | "onChange" | "children" | "elevation" | "square" | "sx" | "variant" | "color" | "translate" | "defaultExpanded" | "disabled" | "disableGutters" | "expanded" | "TransitionComponent" | "TransitionProps" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "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" | keyof AccordionExtraProps> & React.RefAttributes<HTMLDivElement>>;
-export default Accordion;

package/dist/src/core/Accordion/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 });
-exports.AccordionHeader = exports.AccordionDetails = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var AccordionDetails_1 = __importDefault(require("./components/AccordionDetails"));
-exports.AccordionDetails = AccordionDetails_1.default;
-var AccordionHeader_1 = __importDefault(require("./components/AccordionHeader"));
-exports.AccordionHeader = AccordionHeader_1.default;
-var style_1 = require("./style");
-/**
- * @see https://mui.com/material-ui/react-accordion/
- */
-var Accordion = react_1.default.forwardRef(function (props, ref) {
-    var children = props.children, useDivider = props.useDivider, _a = props.togglePosition, togglePosition = _a === void 0 ? "right" : _a, id = props.id;
-    var _b = react_1.default.useState(false), expanded = _b[0], setExpanded = _b[1];
-    var handleChange = function (panel) {
-        return function (_event, isExpanded) {
-            setExpanded(isExpanded ? panel : false);
-        };
-    };
-    return ((0, jsx_runtime_1.jsx)(style_1.StyledAccordion, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
-});
-exports.default = Accordion;

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

@@ -1,28 +0,0 @@
-import { Args } from "@storybook/react";
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
-export default _default;
-export declare const Default: {
-    args: {
-        togglePosition: string;
-    };
-};
-export declare const LivePreview: {
-    parameters: {
-        snapshot: {
-            skip: boolean;
-        };
-    };
-    render: (args: Args) => JSX.Element;
-};
-export declare const Test: {
-    args: {
-        id: string;
-        togglePosition: string;
-    };
-    parameters: {
-        snapshot: {
-            skip: boolean;
-        };
-    };
-    render: (props: Args) => JSX.Element;
-};

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

@@ -1,82 +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 AccordionDetails_1 = __importDefault(require("./components/AccordionDetails"));
-var AccordionHeader_1 = __importDefault(require("./components/AccordionHeader"));
-var index_1 = __importDefault(require("./index"));
-var Accordion = function (props) {
-    var id = props.id, subtitle = props.subtitle, useDivider = props.useDivider, togglePosition = props.togglePosition;
-    return ((0, jsx_runtime_1.jsxs)(index_1.default, __assign({ id: id, useDivider: useDivider, togglePosition: togglePosition }, props, { children: [(0, jsx_runtime_1.jsx)(AccordionHeader_1.default, { id: "".concat(id, "-header"), subtitle: subtitle, children: "Accordion Header" }), (0, jsx_runtime_1.jsx)(AccordionDetails_1.default, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget." })] })));
-};
-exports.default = {
-    argTypes: {
-        id: {
-            control: { type: "text" },
-            required: true,
-        },
-        subtitle: {
-            control: { type: "text" },
-        },
-        togglePosition: {
-            control: { type: "select" },
-            options: ["right", "left"],
-        },
-        useDivider: {
-            control: { type: "boolean" },
-        },
-    },
-    component: Accordion,
-    title: "Accordion",
-};
-// Default
-exports.Default = {
-    args: {
-        togglePosition: "right",
-    },
-};
-// LivePreview
-var livePreviewStyles = {
-    display: "grid",
-    gridColumnGap: "24px",
-    gridRowGap: "50px",
-    gridTemplateColumns: "repeat(4, 200px)",
-};
-function LivePreviewDemo(props) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: livePreviewStyles, children: [(0, jsx_runtime_1.jsx)(Accordion, __assign({ id: "accordion-1", togglePosition: "right", useDivider: true }, props)), (0, jsx_runtime_1.jsx)(Accordion, __assign({ id: "accordion-2", togglePosition: "right", subtitle: "Optional Subtitle", useDivider: true }, props)), (0, jsx_runtime_1.jsx)(Accordion, __assign({ id: "accordion-3", togglePosition: "left", useDivider: true }, props)), (0, jsx_runtime_1.jsx)(Accordion, __assign({ id: "accordion-4", togglePosition: "left", subtitle: "Optional Subtitle", useDivider: true }, props))] }));
-}
-exports.LivePreview = {
-    parameters: {
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
-};
-// Test
-exports.Test = {
-    args: {
-        id: "test-story",
-        togglePosition: "right",
-    },
-    parameters: {
-        snapshot: {
-            skip: true,
-        },
-    },
-    render: function (props) { return ((0, jsx_runtime_1.jsx)(Accordion, __assign({}, props, { "data-testid": "accordion" }))); },
-};

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

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