@macive/ui 0.0.13 → 0.0.14

package/dist/locales/da.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar med initialer {initials}"

package/dist/locales/de.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar mit Initialen {initials}"

package/dist/locales/en.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "ActionMenu": {
             "Actions": {
                 "moreActions": "More actions"

package/dist/locales/es.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar con las iniciales {initials}"

package/dist/locales/fi.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar alkukirjaimilla {initials}"

package/dist/locales/fr.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar avec les initiales {initials}"

package/dist/locales/it.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar con iniziali {initials}"

package/dist/locales/ja.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "アバター",
             "labelWithInitials": "頭文字が{initials}のアバター"

package/dist/locales/ko.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "아바타",
             "labelWithInitials": "아바타(이니셜: {initials})"

package/dist/locales/nb.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar med initialene {initials}"

package/dist/locales/nl.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar met initialen {initials}"

package/dist/locales/pl.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar z inicjałami {initials}"

package/dist/locales/pt-BR.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar com as iniciais {initials}"

package/dist/locales/pt-PT.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar com as iniciais {initials}"

package/dist/locales/sv.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Avatar med initialer {initials}"

package/dist/locales/th.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "ตัวแทน",
             "labelWithInitials": "ตัวแทนพร้อมอักษรย่อ {initials}"

package/dist/locales/tr.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Avatar",
             "labelWithInitials": "Baş harfleri {initials} olan avatar"

package/dist/locales/vi.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "Hình đại diện",
             "labelWithInitials": "Hình đại diện là tên viết tắt {initials}"

package/dist/locales/zh-CN.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "头像",
             "labelWithInitials": "头像和姓名缩写 {initials}"

package/dist/locales/zh-TW.json

@@ -1,5 +1,5 @@
 {
-    "Polaris": {
+    "Macive": {
         "Avatar": {
             "label": "大頭貼",
             "labelWithInitials": "姓名首字母為 {initials} 的大頭貼"

package/dist/scripts/build-scss.js

@@ -16,6 +16,18 @@ const sass_1 = __importDefault(require("sass"));
 const srcDir = './src';
 const outputDir = './dist/css';
 const outputFile = './dist/ui.min.css';
+/**
+ * Draws a progress bar in the terminal.
+ * @param {number} percentage - The current progress percentage.
+ * @param {number} length - The length of the progress bar.
+ */
+function drawProgressBar(percentage, length = 30) {
+    const filledLength = Math.round((percentage / 100) * length);
+    const emptyLength = length - filledLength;
+    const filledBar = '\x1b[42m \x1b[0m'.repeat(filledLength); // Green background
+    const emptyBar = '\x1b[41m \x1b[0m'.repeat(emptyLength); // Red background
+    process.stdout.write(`\r[${filledBar}${emptyBar}] ${percentage.toFixed(2)}%`);
+}
 /**
  * Compiles an SCSS file to CSS and processes it with PostCSS for prefixing.
  * @param inputFile - The path to the SCSS input file.
@@ -63,7 +75,7 @@ function minifyAndSaveCSS() {
  */
 function removePrefixBeforeHyphen(input) {
     const parts = input.split('-');
-    return parts.length > 1 ? parts.slice(1).join('-') : input;
+    return parts.length > 1 ? parts.join('-') : input;
 }
 /**
  * Generates a TypeScript file containing the class names with a prefix from the provided SCSS and CSS files.
@@ -146,7 +158,6 @@ exports.default = extractClassNames;
  */
 function removeFirstBeforeHyphen(input) {
     const parts = input.split('-');
-    // If there are multiple parts, remove the first one and rejoin the rest
     return parts.length > 1 ? parts.slice(1).join('-') : input;
 }
 /**
@@ -162,13 +173,26 @@ function ensureOutputDirectoryExists() {
  */
 async function processAllSCSSFiles() {
     const scssFiles = glob_1.default.sync(`${srcDir}/**/*.scss`);
-    for (const file of scssFiles) {
+    const totalFiles = scssFiles.length;
+    // Start time
+    const startTime = Date.now();
+    for (let i = 0; i < totalFiles; i++) {
+        const file = scssFiles[i];
         const outputFilePath = path_1.default.join(outputDir, path_1.default.basename(file).replace('.scss', '.css'));
         await compileSCSSToCSS(file, outputFilePath);
         await generateClassnamesFileFromSCSS(file, outputFilePath);
+        // Update progress bar
+        const percentage = ((i + 1) / totalFiles) * 100;
+        drawProgressBar(percentage);
     }
+    // End time
+    const endTime = Date.now();
+    const timeTaken = (endTime - startTime) / 1000; // Convert to seconds
+    // Move to the next line after progress bar is complete
+    console.log('\n');
     minifyAndSaveCSS();
     console.log(`All CSS files minified and saved to ${outputFile}`);
+    console.log(`Time taken: ${timeTaken.toFixed(2)} seconds`);
 }
 /**
  * Watches for changes in SCSS files and recompiles them when modified.

package/dist/src/components/AlphaTabs/AlphaTabs.classnames.js

@@ -2,18 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const AlphaTabsClassnames = {
     "IconWrap": "AlphaTabs-IconWrap",
-    "Tab-popoverActive": "AlphaTabs-popoverActive",
+    "Tab-popoverActive": "AlphaTabs-Tab-popoverActive",
     "Underline": "AlphaTabs-Underline",
-    "IconWrap-open": "AlphaTabs-open",
+    "IconWrap-open": "AlphaTabs-IconWrap-open",
     "Outer": "AlphaTabs-Outer",
     "Wrapper": "AlphaTabs-Wrapper",
     "WrapperWithNewButton": "AlphaTabs-WrapperWithNewButton",
     "ButtonWrapper": "AlphaTabs-ButtonWrapper",
     "AlphaTabs": "AlphaTabs-AlphaTabs",
     "Tab": "AlphaTabs-Tab",
-    "Tab-active": "AlphaTabs-active",
-    "Tab-hasActions": "AlphaTabs-hasActions",
-    "Tab-iconOnly": "AlphaTabs-iconOnly",
+    "Tab-active": "AlphaTabs-Tab-active",
+    "Tab-hasActions": "AlphaTabs-Tab-hasActions",
+    "Tab-iconOnly": "AlphaTabs-Tab-iconOnly",
     "fillSpace": "AlphaTabs-fillSpace",
     "TabContainer": "AlphaTabs-TabContainer",
     "fitted": "AlphaTabs-fitted",
@@ -21,12 +21,12 @@ const AlphaTabsClassnames = {
     "List": "AlphaTabs-List",
     "Item": "AlphaTabs-Item",
     "DisclosureTab": "AlphaTabs-DisclosureTab",
-    "DisclosureTab-visible": "AlphaTabs-visible",
+    "DisclosureTab-visible": "AlphaTabs-DisclosureTab-visible",
     "DisclosureActivator": "AlphaTabs-DisclosureActivator",
     "TabsMeasurer": "AlphaTabs-TabsMeasurer",
     "NewTab": "AlphaTabs-NewTab",
     "ActionListWrap": "AlphaTabs-ActionListWrap",
     "Panel": "AlphaTabs-Panel",
-    "Panel-hidden": "AlphaTabs-hidden"
+    "Panel-hidden": "AlphaTabs-Panel-hidden"
 };
 exports.default = AlphaTabsClassnames;

package/dist/src/components/AlphaTabs/utilities.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getVisibleAndHiddenTabIndices = void 0;
-function getVisibleAndHiddenTabIndices(tabs, selected, disclosureWidth, tabWidths, containerWidth) {
+function getVisibleAndHiddenTabIndices(tabs, selected, disclosureWidth, tabWidths, 
+//disabled
+containerWidthD) {
     const sumTabWidths = tabWidths.reduce((sum, width) => sum + width, 0);
     const arrayOfTabIndices = tabs.map((_, index) => {
         return index;
     });
+    //disabled
+    // const containerWidth = sumTabWidths ?? containerWidthD
+    const containerWidth = containerWidthD;
     const visibleTabs = [];
     const hiddenTabs = [];
     if (containerWidth > sumTabWidths) {
@@ -17,8 +22,7 @@ function getVisibleAndHiddenTabIndices(tabs, selected, disclosureWidth, tabWidth
         arrayOfTabIndices.forEach((currentTabIndex) => {
             if (currentTabIndex !== selected) {
                 const currentTabWidth = tabWidths[currentTabIndex];
-                if (tabListWidth + currentTabWidth >=
-                    containerWidth - disclosureWidth) {
+                if (tabListWidth + currentTabWidth >= containerWidth - disclosureWidth) {
                     hiddenTabs.push(currentTabIndex);
                     return;
                 }

package/dist/src/components/AppProvider/AppProvider.js

@@ -1,9 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Upload_1 = require("../Upload");
+const en_json_1 = __importDefault(require("../../../locales/en.json"));
 const device_type_1 = require("../../utilities/device-type");
 const features_1 = require("../../utilities/features");
 const i18n_1 = require("../../utilities/i18n");
@@ -25,7 +29,8 @@ class AppProvider extends react_1.Component {
         this.stickyManager = new sticky_manager_1.StickyManager();
         this.scrollLockManager = new scroll_lock_manager_1.ScrollLockManager();
         this.uniqueIdFactory = new unique_id_1.UniqueIdFactory(unique_id_1.globalIdGeneratorFactory);
-        const { i18n, linkComponent } = this.props;
+        const { i18n: dynamici18n, linkComponent } = this.props;
+        const i18n = dynamici18n || en_json_1.default.Macive;
         // eslint-disable-next-line react/state-in-constructor
         this.state = {
             link: linkComponent,
@@ -39,7 +44,8 @@ class AppProvider extends react_1.Component {
         }
     }
     componentDidUpdate({ i18n: prevI18n, linkComponent: prevLinkComponent }) {
-        const { i18n, linkComponent } = this.props;
+        const { i18n: dynamici18n, linkComponent } = this.props;
+        const i18n = dynamici18n || en_json_1.default.Macive;
         if (i18n === prevI18n && linkComponent === prevLinkComponent) {
             return;
         }

package/dist/src/components/Box/Box.js

@@ -30,7 +30,7 @@ exports.Box = void 0;
 const react_1 = __importStar(require("react"));
 const css_1 = require("../../utilities/css");
 const Box_classnames_1 = __importDefault(require("./Box.classnames"));
-exports.Box = (0, react_1.forwardRef)(({ as = 'div', background, borderColor, borderStyle, borderWidth, borderBlockStartWidth, borderBlockEndWidth, borderInlineStartWidth, borderInlineEndWidth, borderRadius, borderRadiusEndStart, borderRadiusEndEnd, borderRadiusStartStart, borderRadiusStartEnd, children, color, id, minHeight, minWidth, maxWidth, overflowX, overflowY, outlineColor, outlineStyle, outlineWidth, padding, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd, role, shadow, tabIndex, width, printHidden, visuallyHidden, position, insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd, zIndex, opacity, hoverInteraction, ...restProps }, ref) => {
+exports.Box = (0, react_1.forwardRef)(({ as = 'div', background, borderColor, borderStyle, borderWidth, borderBlockStartWidth, borderBlockEndWidth, borderInlineStartWidth, borderInlineEndWidth, borderRadius, borderRadiusEndStart, borderRadiusEndEnd, borderRadiusStartStart, borderRadiusStartEnd, children, color, id, minHeight, minWidth, maxWidth, overflowX, overflowY, outlineColor, outlineStyle, outlineWidth, padding, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd, role, shadow, tabIndex, width, printHidden, visuallyHidden, position, insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd, zIndex, opacity, hoverInteraction, onClick, ...restProps }, ref) => {
     // eslint-disable-next-line no-nested-ternary
     const borderStyleValue = borderStyle
         ? borderStyle
@@ -118,6 +118,7 @@ exports.Box = (0, react_1.forwardRef)(({ as = 'div', background, borderColor, bo
         style: (0, css_1.sanitizeCustomProperties)(style),
         role,
         tabIndex,
+        onClick,
         ...restProps,
     }, children);
 });

package/dist/src/components/BulkActions/BulkActions.classnames.js

@@ -4,12 +4,12 @@ const BulkActionsClassnames = {
     "ButtonGroupInner": "BulkActions-ButtonGroupInner",
     "Popover": "BulkActions-Popover",
     "Group": "BulkActions-Group",
-    "Group-not-sticky": "BulkActions-not-sticky",
-    "Group-entering": "BulkActions-entering",
-    "Group-exiting": "BulkActions-exiting",
-    "Group-entered": "BulkActions-entered",
-    "Group-exited": "BulkActions-exited",
-    "Group-measuring": "BulkActions-measuring",
+    "Group-not-sticky": "BulkActions-Group-not-sticky",
+    "Group-entering": "BulkActions-Group-entering",
+    "Group-exiting": "BulkActions-Group-exiting",
+    "Group-entered": "BulkActions-Group-entered",
+    "Group-exited": "BulkActions-Group-exited",
+    "Group-measuring": "BulkActions-Group-measuring",
     "ButtonGroupWrapper": "BulkActions-ButtonGroupWrapper",
     "BulkActionButton": "BulkActions-BulkActionButton",
     "disabled": "BulkActions-disabled"

package/dist/src/components/ButtonGroup/ButtonGroup.classnames.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const ButtonGroupClassnames = {
     "ButtonGroup": "ButtonGroup-ButtonGroup",
     "Item": "ButtonGroup-Item",
-    "Item-plain": "ButtonGroup-plain",
+    "Item-plain": "ButtonGroup-Item-plain",
     "segmented": "ButtonGroup-segmented",
-    "Item-focused": "ButtonGroup-focused",
+    "Item-focused": "ButtonGroup-Item-focused",
     "fullWidth": "ButtonGroup-fullWidth",
     "extraTight": "ButtonGroup-extraTight",
     "tight": "ButtonGroup-tight",

package/dist/src/components/Checkbox/Checkbox.classnames.js

@@ -5,7 +5,7 @@ const CheckboxClassnames = {
     "ChoiceLabel": "Checkbox-ChoiceLabel",
     "Backdrop": "Checkbox-Backdrop",
     "Input": "Checkbox-Input",
-    "Input-indeterminate": "Checkbox-indeterminate",
+    "Input-indeterminate": "Checkbox-Input-indeterminate",
     "Icon": "Checkbox-Icon",
     "animated": "Checkbox-animated",
     "toneMagic": "Checkbox-toneMagic",

package/dist/src/components/Checkbox/Checkbox.js

@@ -13,7 +13,6 @@ const use_toggle_1 = require("../../utilities/use-toggle");
 const Choice_1 = require("../Choice");
 const InlineError_1 = require("../InlineError");
 const Icon_1 = require("../Icon");
-const Icons_1 = require("../Icons");
 const Checkbox_classnames_1 = __importDefault(require("./Checkbox.classnames"));
 exports.Checkbox = (0, react_1.forwardRef)(function Checkbox({ ariaControls, ariaDescribedBy: ariaDescribedByProp, label, labelHidden, checked = false, helpText, disabled, id: idProp, name, value, error, onChange, onFocus, onBlur, legacy, }, ref) {
     const inputNode = (0, react_1.useRef)(null);
@@ -56,7 +55,7 @@ exports.Checkbox = (0, react_1.forwardRef)(function Checkbox({ ariaControls, ari
     const indeterminateAttributes = isIndeterminate
         ? { indeterminate: 'true', 'aria-checked': 'mixed' }
         : { 'aria-checked': isChecked };
-    const iconSource = isIndeterminate ? Icons_1.MaMinus : Icons_1.MaCheck;
+    const iconSource = isIndeterminate ? MinusIcon : TickIcon;
     const inputClassName = (0, css_1.classNames)(Checkbox_classnames_1.default.Input, isIndeterminate && Checkbox_classnames_1.default['Input-indeterminate']);
     const legacyProps = legacy
         ? {
@@ -75,9 +74,9 @@ function noop() { }
 function stopPropagation(event) {
     event.stopPropagation();
 }
-const MinusSquareIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 448 512', height: '1.75em', width: '1.75em', xmlns: 'http://www.w3.org/2000/svg', ...props, children: (0, jsx_runtime_1.jsx)("path", { d: 'M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM92 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H92z' }) }));
+const MinusIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, viewBox: '0 0 20 20', xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("path", { d: 'M14.1667 9H5.83333C5.3725 9 5 9.448 5 10C5 10.552 5.3725 11 5.83333 11H14.1667C14.6275 11 15 10.552 15 10C15 9.448 14.6275 9 14.1667 9', fill: 'white' }) }));
 };
 const TickIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { ...props, version: '1.1', viewBox: '0 0 17 12', xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("g", { fill: 'none', fillRule: 'evenodd', children: (0, jsx_runtime_1.jsx)("g", { transform: 'translate(-9 -11)', fill: 'white', fillRule: 'nonzero', children: (0, jsx_runtime_1.jsx)("path", { d: 'm25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z' }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, viewBox: '0 0 20 20', xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("path", { d: 'M14.7232 6.23741C15.0707 6.57449 15.0942 7.14584 14.7756 7.51356L9.40976 13.7071C9.25243 13.8887 9.03181 13.9944 8.79903 13.9998C8.56625 14.0051 8.3415 13.9097 8.17686 13.7355L5.25003 10.6387C4.91666 10.2859 4.91666 9.71406 5.25003 9.36133C5.5834 9.00859 6.12391 9.00859 6.45729 9.36133L8.75367 11.791L13.5171 6.2929C13.8356 5.92518 14.3756 5.90034 14.7232 6.23741Z', fill: 'white' }) }));
 };

package/dist/src/components/CheckboxTree/CheckboxList.js

@@ -25,49 +25,48 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const Box_1 = require("../Box");
+const Button_1 = require("../Button");
 const Checkbox_1 = require("../Checkbox");
-const FlexBox_1 = require("../FlexBox");
+const HorizontalStack_1 = require("../HorizontalStack");
+const Icons_1 = require("../Icons");
 const Tree_1 = require("./Tree");
+/**
+ * A recursive checkbox list component that supports nested items.
+ */
 const CheckboxList = ({ items, getStateForId, idsToRender = [], indentLevel = 0, onClick = () => { }, }) => {
+    // State to track which items are expanded
     const [openIds, setOpenIds] = (0, react_1.useState)([]);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [counts, setCounts] = (0, react_1.useState)({});
-    if (!idsToRender.length) {
-        idsToRender = items.filter((i) => !i.parentId).map((i) => i.id);
-    }
+    // Memoize the root items to avoid recalculating on every render
+    const rootItems = (0, react_1.useMemo)(() => {
+        if (!idsToRender.length) {
+            return items.filter((i) => !i.parentId).map((i) => i.id);
+        }
+        return idsToRender;
+    }, [items, idsToRender]);
+    /**
+     * Renders child nodes for a given parent ID.
+     */
     const getChildNodes = (parentId) => {
         const nodeItems = items.filter((i) => i.parentId === parentId);
         if (!nodeItems.length)
             return null;
-        //   setCounts({ ...counts, [parentId]: nodeItems.length });
-        return ((0, jsx_runtime_1.jsx)(CheckboxList, { items: items, idsToRender: nodeItems.map((i) => i.id), indentLevel: indentLevel + 1, onClick: onClick, getStateForId: getStateForId }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: indentLevel * 20 }, children: (0, jsx_runtime_1.jsx)(CheckboxList, { items: items, idsToRender: nodeItems.map((i) => i.id), indentLevel: indentLevel + 1, onClick: onClick, getStateForId: getStateForId }) }));
+    };
+    /**
+     * Toggles the expanded/collapsed state of an item.
+     */
+    const handleToggle = (id) => {
+        setOpenIds((prev) => prev.includes(id) ? prev.filter((openId) => openId !== id) : [...prev, id]);
     };
-    const ref = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(FlexBox_1.FlexBox, { as: 'ul', direction: 'col', gap: 2, 
-        //   divide={indentLevel == 0}
-        //   className={indentLevel == 0 ? 'border-t' : ''}
-        // className={styles.list}
-        style: { paddingLeft: indentLevel * 20 }, children: idsToRender.map((id) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: indentLevel * (indentLevel > 2 ? 4 : 20) }, children: rootItems.map((id, index) => {
             const item = items.find((i) => i.id === id);
             const checkboxState = getStateForId(id);
             const hasChildren = items.some((i) => i.parentId === id);
             const isNodeOpen = openIds.includes(id);
-            const handleToggle = () => {
-                if (openIds.includes(id)) {
-                    setOpenIds(openIds.filter((openId) => openId !== id));
-                }
-                else {
-                    setOpenIds([...openIds, id]);
-                }
-            };
-            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FlexBox_1.FlexBox, { className: indentLevel == 0 ? 'border-t first:border-t-0' : '', gap: 4, align: 'center', style: { padding: indentLevel == 0 ? '4px' : '4px' }, as: 'li', children: [hasChildren ? ((0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: handleToggle, children: isNodeOpen ? (0, jsx_runtime_1.jsx)("span", { children: "\u2212" }) : (0, jsx_runtime_1.jsx)("span", { children: "+" }) })) : ((0, jsx_runtime_1.jsx)("span", { className: 'text-transparent', children: "+" })), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox
-                            //TODO::check if it works
-                            // readOnly
-                            , { 
-                                //TODO::check if it works
-                                // readOnly
-                                ref: ref, label: item.name, name: item.id, onChange: () => onClick(item.id), checked: checkboxState === Tree_1.CheckboxState.CHECKED ||
-                                    (checkboxState === Tree_1.CheckboxState.INDETERMINATE && 'indeterminate') })] }), isNodeOpen && getChildNodes(item.id)] }, item.id));
+            return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsxs)(Box_1.Box, { borderStyle: indentLevel === 0 ? 'solid' : 'dashed', ...(index === 0 &&
+                        !(indentLevel === 0 && index === 0) && { borderBlockStartWidth: '1' }), ...(!!rootItems.length && { borderBlockEndWidth: '1' }), borderColor: indentLevel === 0 && isNodeOpen ? 'transparent' : 'border-strong', children: [(0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', children: [hasChildren ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { icon: isNodeOpen ? Icons_1.MaDown : Icons_1.MaRight, role: 'button', onClick: () => handleToggle(item.id), plain: true })) : ((0, jsx_runtime_1.jsx)("span", { style: { marginLeft: '20px' } })), (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: item.name, name: item.id, onChange: () => onClick(item.id), checked: checkboxState === Tree_1.CheckboxTreeState.CHECKED ||
+                                        (checkboxState === Tree_1.CheckboxTreeState.INDETERMINATE && 'indeterminate') })] }), isNodeOpen && getChildNodes(item.id)] }) }, item.id));
         }) }));
 };
 exports.default = CheckboxList;

package/dist/src/components/CheckboxTree/Tree.js

@@ -1,44 +1,85 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxTree = exports.CheckboxState = void 0;
+exports.CheckboxTree = exports.CheckboxTreeState = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FlexBox_1 = require("../FlexBox");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
+const Box_1 = require("../Box");
+const VerticalStack_1 = require("../VerticalStack");
 const CheckboxList_1 = __importDefault(require("./CheckboxList"));
 const updateItemStates_1 = require("./updateItemStates");
-var CheckboxState;
-(function (CheckboxState) {
-    CheckboxState[CheckboxState["UNCHECKED"] = 0] = "UNCHECKED";
-    CheckboxState[CheckboxState["CHECKED"] = 1] = "CHECKED";
-    CheckboxState[CheckboxState["INDETERMINATE"] = 2] = "INDETERMINATE";
-})(CheckboxState = exports.CheckboxState || (exports.CheckboxState = {}));
-const CheckboxTree = ({ defaultItemStates, onDataChange, items, values, }) => {
+/**
+ * Enum representing the state of a checkbox.
+ */
+var CheckboxTreeState;
+(function (CheckboxTreeState) {
+    CheckboxTreeState[CheckboxTreeState["UNCHECKED"] = 0] = "UNCHECKED";
+    CheckboxTreeState[CheckboxTreeState["CHECKED"] = 1] = "CHECKED";
+    CheckboxTreeState[CheckboxTreeState["INDETERMINATE"] = 2] = "INDETERMINATE";
+})(CheckboxTreeState = exports.CheckboxTreeState || (exports.CheckboxTreeState = {}));
+/**
+ * CheckboxTree component props.
+ *
+ * @param {CheckboxTreeItemState[]} defaultItemStates - The default states of items in the tree.
+ * @param {(x: CheckboxTreeItemState[]) => void} onDataChange - Callback triggered when item states change.
+ * @param {CheckboxTreeItem[]} items - The list of items to display in the tree.
+ * @param {CheckboxTreeItemState[]} values - The current states of the items.
+ */
+/**
+ * A memoized checkbox tree component that supports nested items and state management.
+ */
+exports.CheckboxTree = react_1.default.memo(({ defaultItemStates, onDataChange, items, values }) => {
     const [itemStates, setItemStates] = (0, react_1.useState)(defaultItemStates);
-    const getStateForId = (0, react_1.useCallback)((id) => {
-        var _a;
-        return (_a = itemStates === null || itemStates === void 0 ? void 0 : itemStates.find((i) => (i === null || i === void 0 ? void 0 : i.id) === id)) === null || _a === void 0 ? void 0 : _a.state;
-    }, [itemStates]);
+    /**
+     * Retrieves the state of a checkbox by its ID.
+     *
+     * @param {number} id - The ID of the checkbox.
+     * @returns {CheckboxTreeState | undefined} The state of the checkbox.
+     */
+    const getStateForId = (0, react_1.useCallback)((id) => { var _a; return (_a = itemStates.find((i) => (i === null || i === void 0 ? void 0 : i.id) === id)) === null || _a === void 0 ? void 0 : _a.state; }, [itemStates]);
     (0, react_1.useEffect)(() => {
-        const dd = itemStates === null || itemStates === void 0 ? void 0 : itemStates.filter((obj) => {
-            return obj.state === 1;
-        });
-        const ff = values === null || values === void 0 ? void 0 : values.filter((obj) => {
-            return obj.state === 1;
-        });
-        if ((ff === null || ff === void 0 ? void 0 : ff.length) !== (dd === null || dd === void 0 ? void 0 : dd.length)) {
+        const selectedItems = itemStates.filter((obj) => obj.state === CheckboxTreeState.CHECKED);
+        const selectedValues = values.filter((obj) => obj.state === CheckboxTreeState.CHECKED);
+        if (selectedValues.length !== selectedItems.length) {
             setItemStates(values);
         }
-    }, [values, itemStates]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [values]);
+    /**
+     * Handles the click event for a checkbox.
+     *
+     * @param {number} id - The ID of the clicked checkbox.
+     */
     const clickHandler = (0, react_1.useCallback)((id) => {
         const newItems = (0, updateItemStates_1.updateItemStates)(itemStates, items, id);
         setItemStates(newItems);
         onDataChange(newItems);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [itemStates]);
-    return ((0, jsx_runtime_1.jsx)(FlexBox_1.FlexBox, { divide: true, dir: 'col', spacing: 'standard', children: (0, jsx_runtime_1.jsx)(CheckboxList_1.default, { items: items, onClick: clickHandler, getStateForId: getStateForId }) }));
-};
-exports.CheckboxTree = CheckboxTree;
+    }, [itemStates, items, onDataChange]);
+    return ((0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { gap: '1', children: (0, jsx_runtime_1.jsx)(Box_1.Box, { borderColor: 'border-subdued', children: (0, jsx_runtime_1.jsx)(CheckboxList_1.default, { items: items, onClick: clickHandler, getStateForId: getStateForId }) }) }));
+});
+exports.CheckboxTree.displayName = 'CheckboxTree';