@sprinklrjs/spaceweb 10.1.0

package/layer/useLayersContextValue.d.ts

@@ -0,0 +1,3 @@
+import { LayersContext } from 'baseui/layer';
+declare const useLayersContextValue: () => React.ContextType<typeof LayersContext>;
+export default useLayersContextValue;

package/layer/useLayersContextValue.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var layer_1 = require("baseui/layer");
+var DocumentProvider_1 = require("../spacewebProvider/DocumentProvider");
+var handlersInitialized = false;
+var docClickHandlers = [];
+var escapeKeyHandlers = [];
+var addEscapeHandler = function (escapeKeyHandler) {
+    escapeKeyHandlers.push(escapeKeyHandler);
+};
+var removeEscapeHandler = function (escapeKeyHandler) {
+    escapeKeyHandlers = escapeKeyHandlers.filter(function (handler) { return handler !== escapeKeyHandler; });
+};
+var addDocClickHandler = function (docClickHandler) {
+    docClickHandlers.push(docClickHandler);
+};
+var removeDocClickHandler = function (docClickHandler) {
+    docClickHandlers = docClickHandlers.filter(function (handler) { return handler !== docClickHandler; });
+};
+var resetHandlers = function () {
+    handlersInitialized = false;
+    docClickHandlers = [];
+    escapeKeyHandlers = [];
+};
+var useLayersContextValue = function () {
+    var ctxValue = (0, react_1.useContext)(layer_1.LayersContext);
+    var doc = (0, DocumentProvider_1.useDocument)();
+    var onDocumentClick = (0, react_1.useCallback)(function (event) {
+        docClickHandlers.forEach(function (handler) { return handler(event); });
+    }, []);
+    var onKeyUp = (0, react_1.useCallback)(function (event) {
+        if (event.key === 'Escape') {
+            var escapeKeyHandler = escapeKeyHandlers[escapeKeyHandlers.length - 1];
+            if (escapeKeyHandler) {
+                escapeKeyHandler(event);
+            }
+        }
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (handlersInitialized)
+            return undefined;
+        doc === null || doc === void 0 ? void 0 : doc.addEventListener('keyup', onKeyUp);
+        // using mousedown event so that callback runs before events on children inside of the layer
+        doc === null || doc === void 0 ? void 0 : doc.addEventListener('mousedown', onDocumentClick);
+        handlersInitialized = true;
+        return function () {
+            doc === null || doc === void 0 ? void 0 : doc.removeEventListener('keyup', onKeyUp);
+            doc === null || doc === void 0 ? void 0 : doc.removeEventListener('mousedown', onDocumentClick);
+            resetHandlers();
+        };
+    }, [doc, onDocumentClick, onKeyUp]);
+    return (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, ctxValue), { addEscapeHandler: addEscapeHandler, removeEscapeHandler: removeEscapeHandler, addDocClickHandler: addDocClickHandler, removeDocClickHandler: removeDocClickHandler })); }, [ctxValue]);
+};
+exports.default = useLayersContextValue;

package/link/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Link } from './link';
+export * from './types';

package/link/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+var tslib_1 = require("tslib");
+var link_1 = require("./link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(link_1).default; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);

package/link/link.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const Link: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & {
+    href?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
+export default Link;

package/link/link.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = require("./styled-components");
+var useFocusVisible_1 = require("../hooks/useFocusVisible");
+var Link = (0, react_1.forwardRef)(function (props, ref) {
+    var focusVisibleProps = (0, useFocusVisible_1.useFocusVisible)(props);
+    var LinkComp = props.href ? styled_components_1.StyledLink : styled_components_1.StyledButtonLink;
+    return (0, jsx_runtime_1.jsx)(LinkComp, (0, tslib_1.__assign)({ "data-spaceweb": "link", "data-testid": "link" }, props, focusVisibleProps, { ref: ref }), void 0);
+});
+Link.displayName = 'Link';
+exports.default = Link;

package/link/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/link/index.js"
+}

package/link/styled-components.d.ts

@@ -0,0 +1,3 @@
+import { StyledComponent } from '../style/styled';
+export declare const StyledLink: StyledComponent;
+export declare const StyledButtonLink: StyledComponent;

package/link/styled-components.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledButtonLink = exports.StyledLink = void 0;
+var tslib_1 = require("tslib");
+var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
+var base_button_1 = require("../base-button");
+var focusVisibleStyles = [
+    'focus-visible:rounded-2 focus-visible:underline',
+    'focus-visible:outline-01 focus-visible:outline-offset-1',
+];
+var linkStyles = [
+    'cursor-pointer spr-link no-underline hover:underline',
+    function (_a) {
+        var theme = _a.theme;
+        return ({
+            fontSize: theme.link.fontSize,
+        });
+    },
+    focusVisibleStyles,
+];
+exports.StyledLink = (0, styled_1.default)('a', linkStyles);
+exports.StyledButtonLink = (0, styled_1.default)('button', base_button_1.buttonResetStyles, linkStyles);

package/link/types.d.ts

@@ -0,0 +1,4 @@
+import { SpacewebComponentProps } from '../types';
+export declare type LinkProps = SpacewebComponentProps & {
+    href?: string;
+};

package/link/types.js

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

package/list/avatar-list-item.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { AvatarProps } from '../avatar';
+declare type SharedProps = {
+    $item?: Record<string, any>;
+    $labelKey?: string;
+    $valueKey?: string;
+    $multi?: boolean;
+};
+declare const AvatarListItem: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & {
+    alignItems?: import("./types").AlignItems | undefined;
+    autoFocus?: boolean | undefined;
+    button?: boolean | undefined;
+    children?: import("react").ReactNode;
+    disabled?: boolean | undefined;
+    endEnhancer?: import("./types").Enhancer<import("./types").ListItemSharedProps>;
+    highlighted?: boolean | undefined;
+    onClick?: ((event: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element>) => void) | undefined;
+    overrides?: {
+        ChildContainer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        EndEnhancer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        Root?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+        StartEnhancer?: import("../overrides").Override<import("./types").ListItemSharedProps & Record<string, any>> | undefined;
+    } | undefined;
+    selected?: boolean | undefined;
+    startEnhancer?: import("./types").Enhancer<import("./types").ListItemSharedProps>;
+} & SharedProps & {
+    avatarProps: AvatarProps;
+} & import("react").RefAttributes<HTMLLIElement>>;
+export default AvatarListItem;

package/list/avatar-list-item.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var avatar_1 = require("../avatar");
+var overrides_1 = require("../overrides");
+var list_item_1 = (0, tslib_1.__importDefault)(require("./list-item"));
+var AvatarListItem = (0, react_1.forwardRef)(function (_a, ref) {
+    var $item = _a.$item, $labelKey = _a.$labelKey, $valueKey = _a.$valueKey, $multi = _a.$multi, children = _a.children, startEnhancer = _a.startEnhancer, avatarProps = _a.avatarProps, menuItemProps = (0, tslib_1.__rest)(_a, ["$item", "$labelKey", "$valueKey", "$multi", "children", "startEnhancer", "avatarProps"]);
+    var sharedProps = { $item: $item, $labelKey: $labelKey, $valueKey: $valueKey, $multi: $multi };
+    var avatarOverrides = (0, overrides_1.mergeOverrides)({ Root: { style: function (_a) {
+                var px2rem = _a.px2rem;
+                return ({ marginRight: px2rem(6) });
+            } } }, avatarProps.overrides);
+    var startEnhancerOverride = function (enhancerProps) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer((0, tslib_1.__assign)((0, tslib_1.__assign)({}, enhancerProps), sharedProps)) : startEnhancer, (0, jsx_runtime_1.jsx)(avatar_1.Avatar, (0, tslib_1.__assign)({ size: "md" }, avatarProps, { overrides: avatarOverrides }), void 0)] }, void 0)); };
+    return ((0, jsx_runtime_1.jsx)(list_item_1.default, (0, tslib_1.__assign)({ startEnhancer: startEnhancerOverride }, menuItemProps, { ref: ref }, { children: children }), void 0));
+});
+AvatarListItem.displayName = 'AvatarListItem';
+exports.default = AvatarListItem;

package/list/divider.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare const Divider: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & {
+    first?: boolean | undefined;
+    overrides?: {
+        Separator?: import("../overrides").Override<{}> | undefined;
+        SubHeader?: import("../overrides").Override<{}> | undefined;
+    } | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export default Divider;

package/list/divider.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
+var overrides_1 = require("../overrides");
+var list_item_1 = (0, tslib_1.__importDefault)(require("./list-item"));
+var styled_component_1 = require("./styled-component");
+var Divider = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, _b = _a.first, first = _b === void 0 ? false : _b, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, restProps = (0, tslib_1.__rest)(_a, ["children", "first", "overrides"]);
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Separator, styled_component_1.StyledListItemDivider), 2), Separator = _d[0], separatorProps = _d[1];
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.SubHeader, list_item_1.default), 2), SubHeader = _e[0], subHeaderProps = _e[1];
+    return children ? ((0, jsx_runtime_1.jsx)(SubHeader, (0, tslib_1.__assign)({ className: (0, classNames_1.default)('spr-border-01 border-solid border-b-0 border-l-0 border-r-0 pb-1', first ? 'border-t-0 pt-0' : 'border-t'), "aria-disabled": true }, restProps, subHeaderProps, { ref: ref }, { children: children }), void 0)) : ((0, jsx_runtime_1.jsx)(Separator, (0, tslib_1.__assign)({ "data-spaceweb": "divider", "aria-disabled": true }, restProps, { ref: ref }, separatorProps), void 0));
+});
+Divider.displayName = 'Divider';
+exports.default = Divider;

package/list/index.d.ts

@@ -0,0 +1,7 @@
+export { default as List } from './list';
+export { default as ListItem } from './list-item';
+export { default as AvatarListItem } from './avatar-list-item';
+export { default as Divider } from './divider';
+export { default as ListItemText } from './list-item-text';
+export { StyledListItem, StyledList, StyledEndEnhancer, StyledListItemDivider, StyledStartEnhancer, } from './styled-component';
+export type { ListItemProps, AlignItems, ListItemSharedProps, ListProps, DividerProps, ListItemTextProps, } from './types';

package/list/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledStartEnhancer = exports.StyledListItemDivider = exports.StyledEndEnhancer = exports.StyledList = exports.StyledListItem = exports.ListItemText = exports.Divider = exports.AvatarListItem = exports.ListItem = exports.List = void 0;
+var list_1 = require("./list");
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return __importDefault(list_1).default; } });
+var list_item_1 = require("./list-item");
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return __importDefault(list_item_1).default; } });
+var avatar_list_item_1 = require("./avatar-list-item");
+Object.defineProperty(exports, "AvatarListItem", { enumerable: true, get: function () { return __importDefault(avatar_list_item_1).default; } });
+var divider_1 = require("./divider");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return __importDefault(divider_1).default; } });
+var list_item_text_1 = require("./list-item-text");
+Object.defineProperty(exports, "ListItemText", { enumerable: true, get: function () { return __importDefault(list_item_text_1).default; } });
+var styled_component_1 = require("./styled-component");
+Object.defineProperty(exports, "StyledListItem", { enumerable: true, get: function () { return styled_component_1.StyledListItem; } });
+Object.defineProperty(exports, "StyledList", { enumerable: true, get: function () { return styled_component_1.StyledList; } });
+Object.defineProperty(exports, "StyledEndEnhancer", { enumerable: true, get: function () { return styled_component_1.StyledEndEnhancer; } });
+Object.defineProperty(exports, "StyledListItemDivider", { enumerable: true, get: function () { return styled_component_1.StyledListItemDivider; } });
+Object.defineProperty(exports, "StyledStartEnhancer", { enumerable: true, get: function () { return styled_component_1.StyledStartEnhancer; } });

package/list/list-item-text.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ListItemTextProps } from './types';
+declare const ListItemText: ({ overrides, children, secondary }: ListItemTextProps) => JSX.Element;
+export default ListItemText;

package/list/list-item-text.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var overrides_1 = require("../overrides");
+var styled_component_1 = require("./styled-component");
+var ListItemText = function (_a) {
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, secondary = _a.secondary;
+    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledListItemText), 2), Root = _c[0], rootProps = _c[1];
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.PrimaryText, styled_component_1.StyledPrimaryText), 2), PrimaryText = _d[0], primaryTextProps = _d[1];
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.SecondaryText, styled_component_1.StyledSecondaryText), 2), SecondaryText = _e[0], secondaryTextProps = _e[1];
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list-item-text", "data-testid": "list-item-text" }, rootProps, { children: [children && (0, jsx_runtime_1.jsx)(PrimaryText, (0, tslib_1.__assign)({}, primaryTextProps, { children: children }), void 0), secondary && (0, jsx_runtime_1.jsx)(SecondaryText, (0, tslib_1.__assign)({}, secondaryTextProps, { children: secondary }), void 0)] }), void 0));
+};
+exports.default = ListItemText;

package/list/list-item.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Enhancer, ListItemSharedProps } from './types';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: React.ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & {
+    alignItems?: import("./types").AlignItems | undefined;
+    autoFocus?: boolean | undefined;
+    button?: boolean | undefined;
+    children?: React.ReactNode;
+    disabled?: boolean | undefined;
+    endEnhancer?: Enhancer<ListItemSharedProps>;
+    highlighted?: boolean | undefined;
+    onClick?: ((event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+    overrides?: {
+        ChildContainer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
+        EndEnhancer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
+        Root?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
+        StartEnhancer?: import("../overrides").Override<ListItemSharedProps & Record<string, any>> | undefined;
+    } | undefined;
+    selected?: boolean | undefined;
+    startEnhancer?: Enhancer<ListItemSharedProps>;
+} & React.RefAttributes<HTMLElement>>>;
+export default _default;

package/list/list-item.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var React = (0, tslib_1.__importStar)(require("react"));
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedRef"));
+var overrides_1 = require("../overrides");
+var styled_component_1 = require("./styled-component");
+var useFocusVisible_1 = require("../hooks/useFocusVisible");
+var ListItem = React.forwardRef(function (_a, ref) {
+    var startEnhancer = _a.startEnhancer, children = _a.children, _b = _a.alignItems, alignItems = _b === void 0 ? 'center' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, endEnhancer = _a.endEnhancer, _d = _a.selected, selected = _d === void 0 ? false : _d, _e = _a.highlighted, highlighted = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.button, button = _g === void 0 ? false : _g, _h = _a.overrides, overrides = _h === void 0 ? {} : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? button ? 0 : undefined : _j, _k = _a.$as, $as = _k === void 0 ? 'li' : _k, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, restProps = (0, tslib_1.__rest)(_a, ["startEnhancer", "children", "alignItems", "disabled", "endEnhancer", "selected", "highlighted", "autoFocus", "button", "overrides", "tabIndex", "$as", "onClick", "onKeyDown", "onFocus", "onBlur"]);
+    var ownRef = (0, react_1.useRef)(null);
+    var combinedRef = (0, useCombinedRef_1.default)(ref, ownRef);
+    React.useEffect(function () {
+        if (autoFocus && ownRef.current) {
+            // When rendered in popover, browser scrolls to the top w/o preventScroll
+            ownRef.current.focus({ preventScroll: true });
+        }
+    }, [autoFocus]);
+    var useFocusVisibleProps = (0, useFocusVisible_1.useFocusVisible)({ onFocus: onFocus, onBlur: onBlur });
+    var handleKeyDown = (0, react_1.useCallback)(function (event) {
+        // Keyboard accessibility for non interactive elements
+        if (button && event.target === event.currentTarget && event.key === 'Enter' && !disabled) {
+            if (onClick) {
+                onClick(event);
+            }
+        }
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    }, [button, disabled, onClick, onKeyDown]);
+    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledListItem), 2), Root = _l[0], rootProps = _l[1];
+    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.ChildContainer, styled_component_1.StyledChildContainer), 2), ChildContainer = _m[0], childContainerProps = _m[1];
+    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.StartEnhancer, styled_component_1.StyledStartEnhancer), 2), StartEnhancer = _o[0], startEnhancerProps = _o[1];
+    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.EndEnhancer, styled_component_1.StyledEndEnhancer), 2), EndEnhancer = _p[0], endEnhancerProps = _p[1];
+    var sharedProps = {
+        $withStartEnhancer: !!startEnhancer,
+        $withEndEnhancer: !!endEnhancer,
+        $alignItems: alignItems,
+        $disabled: disabled,
+        $selected: selected,
+        $highlighted: highlighted,
+        $button: button,
+    };
+    var renderEnhancer = function (enhancer) {
+        return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
+    };
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "aria-disabled": disabled, "$as": $as, onClick: disabled ? noop_1.default : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), (0, jsx_runtime_1.jsx)(ChildContainer, (0, tslib_1.__assign)({}, sharedProps, childContainerProps, { children: children }), void 0), endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, (0, tslib_1.__assign)({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0));
+});
+ListItem.displayName = 'ListItem';
+exports.default = React.memo(ListItem);

package/list/list.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & {
+    children?: import("react").ReactNode;
+    overrides?: {
+        Root?: import("../overrides").Override<Record<string, any>> | undefined;
+    } | undefined;
+} & import("react").RefAttributes<HTMLElement>>>;
+export default _default;

package/list/list.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var overrides_1 = require("../overrides");
+var styled_component_1 = require("./styled-component");
+var List = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, restProps = (0, tslib_1.__rest)(_a, ["overrides", "children"]);
+    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledList), 2), Root = _c[0], rootProps = _c[1];
+    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list", role: "list" }, restProps, rootProps, { ref: ref }, { children: children }), void 0));
+});
+List.displayName = 'List';
+exports.default = (0, react_1.memo)(List);

package/list/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/list/index.js"
+}

package/list/styled-component.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledList: import("../style/styled").StyledComponent;
+export declare const StyledListItem: import("../style/styled").StyledComponent;
+export declare const StyledListItemText: import("../style/styled").StyledComponent;
+export declare const StyledPrimaryText: import("../style/styled").StyledComponent;
+export declare const StyledSecondaryText: import("../style/styled").StyledComponent;
+export declare const StyledListItemDivider: import("../style/styled").StyledComponent;
+export declare const StyledStartEnhancer: import("../style/styled").StyledComponent;
+export declare const StyledEndEnhancer: import("../style/styled").StyledComponent;
+export declare const StyledChildContainer: import("../style/styled").StyledComponent;

package/list/styled-component.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledChildContainer = exports.StyledEndEnhancer = exports.StyledStartEnhancer = exports.StyledListItemDivider = exports.StyledSecondaryText = exports.StyledPrimaryText = exports.StyledListItemText = exports.StyledListItem = exports.StyledList = void 0;
+var tslib_1 = require("tslib");
+var classNames_1 = (0, tslib_1.__importDefault)(require("../classNames"));
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var style_1 = require("../style");
+// `pl-0 pr-0 mt-0 mb-0` should not be needed, normalize css is not applied to docs
+exports.StyledList = (0, style_1.styled)('ul', 'box-border spr-ui-01 pl-0 pr-0 mt-0 mb-0', function (_a) {
+    var px2rem = _a.px2rem;
+    return ((0, tslib_1.__assign)({ paddingTop: px2rem(10), paddingBottom: px2rem(10) }, (0, longHandHelpers_1.borderRadius)('inherit')));
+}, function (_, _a) {
+    var $showFocusOutline = _a.$showFocusOutline;
+    return ($showFocusOutline ? 'focus-visible:outline-01' : '');
+});
+var backgroundColor = function (_a, _b) {
+    var theme = _a.theme;
+    var $button = _b.$button, $selected = _b.$selected, $disabled = _b.$disabled, $highlighted = _b.$highlighted, $isFocusVisible = _b.$isFocusVisible;
+    var hoverBackgroundColor = (0, themeHelpers_1.getComponentTheme)(theme, 'list').hoverBackgroundColor;
+    var styles = { backgroundColor: theme.spr.ui01 };
+    if ($button && !$disabled) {
+        styles[':hover'] = { backgroundColor: hoverBackgroundColor };
+        if ($isFocusVisible) {
+            styles[':focus-within'] = { backgroundColor: hoverBackgroundColor };
+        }
+    }
+    if (($selected || $highlighted) && !$disabled) {
+        styles.backgroundColor = hoverBackgroundColor;
+    }
+    return styles;
+};
+exports.StyledListItem = (0, style_1.styled)('li', function (_a, props) {
+    var getStyle = _a.getStyle;
+    return getStyle((0, classNames_1.default)('relative flex justify-start py-2 px-4 typography-l1 fill-current spr-ui-01', {
+        'items-start': props.$alignItems === 'start',
+        'items-center': props.$alignItems === 'center',
+        'cursor-pointer': props.$button && !props.$disabled,
+        'spr-text-03 spr-icon-disable cursor-not-allowed': props.$disabled,
+    }));
+}, backgroundColor, 'focus-visible:outline-01 focus-visible:-outline-offset-2 focus-visible:rounded-6', function (_a, props) {
+    var getStyle = _a.getStyle, px2rem = _a.px2rem, theme = _a.theme;
+    var selectedEnhancerBackground = (0, themeHelpers_1.getComponentTheme)(theme, 'list').selectedEnhancerBackground;
+    return (0, tslib_1.__assign)({}, (props.$selected && {
+        '::before': (0, tslib_1.__assign)({ content: '" "', width: px2rem(2), backgroundColor: selectedEnhancerBackground }, getStyle('h-full absolute top-0 left-0')),
+    }));
+});
+exports.StyledListItemText = (0, style_1.styled)('div', 'flex-auto flex flex-col');
+exports.StyledPrimaryText = (0, style_1.styled)('div', 'typography-l1');
+exports.StyledSecondaryText = (0, style_1.styled)('div', 'spr-text-02 typography-l3', function (_a) {
+    var px2rem = _a.px2rem;
+    return ({
+        marginTop: px2rem(2),
+    });
+});
+exports.StyledListItemDivider = (0, style_1.styled)('li', 'block h-px spr-ui-03');
+exports.StyledStartEnhancer = (0, style_1.styled)('div', 'inline-flex', function (_a, props) {
+    var getStyle = _a.getStyle, direction = _a.direction;
+    return getStyle((0, classNames_1.default)({
+        'pr-3': direction !== 'rtl',
+        'pl-3': direction === 'rtl',
+        'mt-1': props.$alignItems === 'start',
+    }));
+});
+exports.StyledEndEnhancer = (0, style_1.styled)('div', 'inline-flex', function (_a, props) {
+    var getStyle = _a.getStyle, direction = _a.direction;
+    return getStyle((0, classNames_1.default)({
+        'pl-3': direction !== 'rtl',
+        'pr-3': direction === 'rtl',
+        'mt-1': props.$alignItems === 'start',
+    }));
+});
+exports.StyledChildContainer = (0, style_1.styled)('div', 'typography-l1 flex-auto', function (_a, props) {
+    var theme = _a.theme;
+    return ({
+        fontWeight: props.$selected ? 700 : 400,
+    });
+});

package/list/types.d.ts

@@ -0,0 +1,57 @@
+import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { Override } from '../overrides/types';
+import { SpacewebComponentProps } from '../types';
+export declare type AlignItems = 'start' | 'center';
+export declare type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
+export declare type ListItemSharedProps = {
+    $withStartEnhancer: boolean;
+    $withEndEnhancer: boolean;
+    $alignItems: AlignItems;
+    $disabled: boolean;
+    $selected: boolean;
+    $highlighted: boolean;
+    $button: boolean;
+};
+export declare type ListItemProps = SpacewebComponentProps & {
+    alignItems?: AlignItems;
+    autoFocus?: boolean;
+    button?: boolean;
+    children?: ReactNode;
+    disabled?: boolean;
+    endEnhancer?: Enhancer<ListItemSharedProps>;
+    highlighted?: boolean;
+    onClick?: (event: MouseEvent | KeyboardEvent) => void;
+    overrides?: {
+        ChildContainer?: Override<ListItemSharedProps & Record<string, any>>;
+        EndEnhancer?: Override<ListItemSharedProps & Record<string, any>>;
+        Root?: Override<ListItemSharedProps & Record<string, any>>;
+        StartEnhancer?: Override<ListItemSharedProps & Record<string, any>>;
+    };
+    selected?: boolean;
+    startEnhancer?: Enhancer<ListItemSharedProps>;
+};
+export declare type ListProps = SpacewebComponentProps & {
+    children?: ReactNode;
+    overrides?: {
+        Root?: Override<Record<string, any>>;
+    };
+};
+export declare type ListItemTextProps = {
+    children?: ReactNode;
+    overrides?: {
+        PrimaryText?: Override<Record<string, any>>;
+        Root?: Override<Record<string, any>>;
+        SecondaryText?: Override<Record<string, any>>;
+    };
+    secondary?: ReactNode;
+};
+export declare type DividerProps = SpacewebComponentProps & {
+    /**
+     * If true, remove top padding and border. When rendering first subheader of the list.
+     */
+    first?: boolean;
+    overrides?: {
+        Separator?: Override<{}>;
+        SubHeader?: Override<{}>;
+    };
+};

package/list/types.js

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

package/loader/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Loader, DEFAULT_SIZE, DEFAULT_DELAY } from './loader';
+export type { SharedProps, LoaderProps, Variant } from './types';
+export { StyledRoot } from './styled-component';

package/loader/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledRoot = exports.DEFAULT_DELAY = exports.DEFAULT_SIZE = exports.Loader = void 0;
+var loader_1 = require("./loader");
+Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return __importDefault(loader_1).default; } });
+Object.defineProperty(exports, "DEFAULT_SIZE", { enumerable: true, get: function () { return loader_1.DEFAULT_SIZE; } });
+Object.defineProperty(exports, "DEFAULT_DELAY", { enumerable: true, get: function () { return loader_1.DEFAULT_DELAY; } });
+var styled_component_1 = require("./styled-component");
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_component_1.StyledRoot; } });

package/loader/loader.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { LoaderProps } from './types';
+export declare const DEFAULT_SIZE = 16;
+export declare const DEFAULT_DELAY = 0;
+declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & import("react").RefAttributes<HTMLElement>>;
+export default Loader;