@ballistix.digital/react-components 1.0.2 → 1.0.3

package/dist/index.d.ts

@@ -843,10 +843,33 @@ type TProps$2 = {
 };
 declare const SlideOverOverlay: FC<TProps$2>;
 
+declare const styles: {
+    controls: {
+        container: string;
+        content: string;
+        head: string;
+        body: string;
+        dropdown: {
+            reset: string;
+            container: string;
+            input: string;
+            label: string;
+            actions: string;
+            upIcon: string;
+            downIcon: string;
+        };
+    };
+    label: string;
+    icon: string;
+};
+
+type TTableColumnOptionsStyles = DeepPartialType$1<typeof styles>;
+
 type TProps$1 = {
     table: Table<any>;
     setColumnOrder: Dispatch<SetStateAction<ColumnOrderState>>;
     trigger: ReactNode;
+    styles?: TTableColumnOptionsStyles;
     resetConfig?: {
         tableId: string;
         label?: string;

package/dist/index.esm.js

@@ -2607,7 +2607,7 @@ var styles$8 = {
 
 var TableColumnOptionsCustom = function (props) {
     var _a;
-    var table = props.table, trigger = props.trigger, setColumnOrder = props.setColumnOrder, resetConfig = props.resetConfig;
+    var table = props.table, trigger = props.trigger, setColumnOrder = props.setColumnOrder, stylesOverrides = props.styles, resetConfig = props.resetConfig;
     var handleUpdateColumnOrder = useCallback(function (table, column, location, setColumnOrder) {
         var _a;
         var ids = (_a = table
@@ -2619,7 +2619,16 @@ var TableColumnOptionsCustom = function (props) {
         ids.splice(location, 0, column.id);
         setColumnOrder(ids);
     }, []);
-    return (jsxs(Popover, { children: [jsx(Popover.Button, { children: trigger }), jsxs(Popover.Panel, { className: styles$7.controls.content, children: [resetConfig && (jsxs("div", { className: styles$7.controls.dropdown.reset, onClick: function () {
+    var handleGenerateStyle = function () {
+        var result = deepCopyObject(styles$7);
+        var keys = calculateNestedKeys(styles$7);
+        keys.forEach(function (key) {
+            set(result, key, toClassName(get(styles$7, key), get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    return (jsxs(Popover, { children: [jsx(Popover.Button, { children: trigger }), jsxs(Popover.Panel, { className: styles.controls.content, children: [resetConfig && (jsxs("div", { className: styles.controls.dropdown.reset, onClick: function () {
                             removeTableState(resetConfig.tableId);
                             table.resetColumnVisibility(true);
                             table.resetColumnOrder();
@@ -2628,9 +2637,9 @@ var TableColumnOptionsCustom = function (props) {
                         .getAllLeafColumns()
                         .map(function (column, index) {
                         var isAccessorColumn = !!(column === null || column === void 0 ? void 0 : column.accessorFn);
-                        return (jsxs("div", { className: toClassName(styles$7.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsx("input", { className: styles$7.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", { className: styles$7.controls.dropdown.label, children: column.columnDef.header }), jsxs("div", { className: styles$7.controls.dropdown.actions, children: [jsx(ChevronDownIcon$1, { className: styles$7.controls.dropdown.upIcon, onClick: function () {
+                        return (jsxs("div", { className: toClassName(styles.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsx("input", { className: styles.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", { className: styles.controls.dropdown.label, children: column.columnDef.header }), jsxs("div", { className: styles.controls.dropdown.actions, children: [jsx(ChevronDownIcon$1, { className: styles.controls.dropdown.upIcon, onClick: function () {
                                                 return handleUpdateColumnOrder(table, column, index - 1, setColumnOrder);
-                                            } }), jsx(ChevronDownIcon$1, { className: styles$7.controls.dropdown.downIcon, onClick: function () {
+                                            } }), jsx(ChevronDownIcon$1, { className: styles.controls.dropdown.downIcon, onClick: function () {
                                                 return handleUpdateColumnOrder(table, column, index + 1, setColumnOrder);
                                             } })] })] }, column.id));
                     })] })] }));