@bcgov-sso/common-react-components 1.31.1 → 1.31.3

package/dist/esm/index.js

@@ -23769,20 +23769,28 @@ var StateManagedSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 var StateManagedSelect$1 = StateManagedSelect;
 
 const Wrapper = styled.div `
-  width: 100%;
   position: relative;
+  display: flex;
+  align-items: center;
 `;
 const Icon$2 = styled.i `
   position: absolute;
-  right: -0.5em;
-  top: 0.5em;
-  color: grey;
+  top: 50%;
+  right: 12px; /* Adjust position as needed */
+  transform: translateY(-50%);
+  pointer-events: none; /* Prevent icon from capturing clicks */
 `;
 const Input = styled.input `
-  width: 100%;
   border: 2px solid #606060;
   padding: 0.3em 0.5em;
   border-radius: 0.25em;
+  width: 100%;
+  flex-grow: 1;
+  padding-right: 24px;
+
+  ::placeholder {
+    font-size: 1rem;
+  }
 `;
 function SearchBar(props) {
     return (React__default.createElement(Wrapper, null,
@@ -23901,13 +23909,20 @@ const Table = ({ variant = 'default', columns = [], data = [], readOnly = false,
         }
     };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' } },
-            enableGlobalSearch && (React__default.createElement("div", { style: { padding: '0.5em 0' } },
+        React__default.createElement("div", { style: {
+                display: 'flex',
+                justifyContent: 'flex-start',
+                alignItems: 'flex-end',
+                gap: '0.5em',
+                padding: '0.5em 0',
+                flexWrap: 'wrap',
+            } },
+            enableGlobalSearch && (React__default.createElement("div", { style: { width: '250px' } },
                 React__default.createElement(SearchBar, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (e) => setGlobalFilter(String(e.target.value)), placeholder: globalSearchPlaceholder, style: globalSearchStyle }))),
-            React__default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end', flexWrap: 'wrap', padding: '0.5em 0', gap: '0.5em' } }, table.getHeaderGroups().map((headerGroup) => headerGroup.headers.map((header) => {
+            table.getHeaderGroups().map((headerGroup) => headerGroup.headers.map((header) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h;
-                return header.column.getCanFilter() && (React__default.createElement("div", { key: header.id },
-                    React__default.createElement("label", { style: { fontWeight: 'bold' } }, String((_b = (_a = header.column.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.filterLabel)),
+                return header.column.getCanFilter() && (React__default.createElement("div", { key: header.id, style: { width: '250px' } },
+                    React__default.createElement("label", { style: { fontWeight: 'bold' } }, String(((_b = (_a = header.column.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.filterLabel) + ':')),
                     React__default.createElement(StateManagedSelect$1, { value: filterState[header.id], onChange: (selected) => {
                             var _a, _b, _c, _d;
                             setFilterState({
@@ -23918,7 +23933,7 @@ const Table = ({ variant = 'default', columns = [], data = [], readOnly = false,
                                 : (_c = selected === null || selected === void 0 ? void 0 : selected.value) !== null && _c !== void 0 ? _c : '';
                             (_d = header.column) === null || _d === void 0 ? void 0 : _d.setFilterValue(newFilter.toString());
                         }, options: ((_d = (_c = header.column.columnDef) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.filterOptions) || [], isMulti: ((_f = (_e = header.column.columnDef) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.multiSelect) || false, placeholder: ((_h = (_g = header.column.columnDef) === null || _g === void 0 ? void 0 : _g.meta) === null || _h === void 0 ? void 0 : _h.filterPlaceholder) || 'Select...', isClearable: true })));
-            })))),
+            }))),
         React__default.createElement(StyledTable, { variant: variant, readOnly: readOnly },
             React__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (React__default.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => {
                 var _a;
@@ -23943,7 +23958,7 @@ const Table = ({ variant = 'default', columns = [], data = [], readOnly = false,
             React__default.createElement("div", { style: { display: 'flex', gap: '0.5em' } },
                 React__default.createElement(Button, { onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage() }, "Prev"),
                 React__default.createElement(Button, { onClick: () => table.nextPage(), disabled: !table.getCanNextPage() }, "Next")),
-            React__default.createElement("div", { style: { position: 'relative', zIndex: 999 } },
+            React__default.createElement("div", { style: { position: 'relative', zIndex: 1 } },
                 React__default.createElement(StateManagedSelect$1, { defaultValue: {
                         label: `${table.getState().pagination.pageSize} per page`,
                         value: table.getState().pagination.pageSize,