@stella-source/stellasource-dsl 5.1.0 → 5.2.0

package/dist/cjs/index.js

@@ -18177,12 +18177,24 @@ const IconButton = a$n.forwardRef(({ iconName, onClick, disabled, variant = "pri
 
 const Wrapper = styled.div `
   display: flex;
-  flex-direction: column;
+  flex-direction: ${({ $labelPosition }) => $labelPosition === "left" ? "row" : "column"};
+  align-items: ${({ $labelPosition }) => $labelPosition === "left" ? "flex-start" : "stretch"};
+  gap: ${({ $labelPosition }) => ($labelPosition === "left" ? "10px" : "0")};
   min-width: 60px;
   max-width: 400px;
   position: relative;
   width: 100%;
 `;
+const InputColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+const LabelAligner = styled.div `
+  height: 32px;
+  display: flex;
+  align-items: center;
+`;
 const TextFieldWrapper = styled.div.attrs({
     className: "DSL-stella-textfield",
 }) `
@@ -18194,7 +18206,7 @@ const TextFieldWrapper = styled.div.attrs({
   border: 1px solid ${Styles.color.grey.medium};
   border-radius: 6px;
   overflow: hidden;
-  margin-top: 3px;
+  margin-top: ${({ $labelPosition }) => $labelPosition === "left" ? "0" : "3px"};
   background-color: ${({ $isDisabled }) => $isDisabled ? Styles.color.grey.pale : "white"};
   outline: ${({ $hasError }) => $hasError && `${Styles.color.states.error} auto 1px`};
   cursor: ${({ $isDisabled, $isLoading }) => {
@@ -18253,10 +18265,9 @@ const IconContainer = styled.div `
   margin-right: 5px;
 `;
 
-const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout = true, disabled = false, hideLabel = false, isLoading = false, hasError = false, isRequired = false, }) => {
-    return (a$n.createElement(Wrapper, { "data-testid": dataTestId, className: className },
-        a$n.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }),
-        a$n.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "data-testid": "text-input-wrapper" },
+const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout = true, disabled = false, hideLabel = false, isLoading = false, hasError = false, isRequired = false, labelPosition = "top", }) => {
+    const inputAndHelper = (a$n.createElement(a$n.Fragment, null,
+        a$n.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "$labelPosition": labelPosition, "data-testid": "text-input-wrapper" },
             leftCategory && a$n.createElement(Category, null, leftCategory),
             children,
             isLoading && (a$n.createElement(IconContainer, null,
@@ -18265,9 +18276,13 @@ const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, classNa
                 a$n.createElement(StellaIcon, { dataTestId: "end-icon", iconName: endIcon }))),
             rightCategory && a$n.createElement(Category, null, rightCategory)),
         helperText && (a$n.createElement(HelperText, { id: `${id}-helper-text`, text: helperText, affectLayout: helperTextAffectLayout, type: hasError ? "error" : "info" }))));
+    return (a$n.createElement(Wrapper, { "data-testid": dataTestId, className: className, "$labelPosition": labelPosition },
+        labelPosition === "left" ? (a$n.createElement(LabelAligner, null,
+            a$n.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }))) : (a$n.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` })),
+        labelPosition === "left" ? (a$n.createElement(InputColumn, null, inputAndHelper)) : (inputAndHelper)));
 };
 
-const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "", textAlign = "left", helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, isLoading = false, ariaDescribedBy, enableAutocomplete = false, }) => {
+const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "", textAlign = "left", helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, isLoading = false, ariaDescribedBy, enableAutocomplete = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18283,6 +18298,7 @@ const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus,
         endIcon,
         disabled,
         isLoading,
+        labelPosition,
     };
     const [inputValue, setInputValue] = a$n.useState("");
     const valueToUse = value ?? inputValue;
@@ -18299,7 +18315,7 @@ const CustomIconButton$2 = styled(IconButton) `
   margin-right: 2px;
 `;
 
-const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter Password", onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign = "left", isHidden = true, helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, ariaDescribedBy, enableAutocomplete = false, }) => {
+const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter Password", onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign = "left", isHidden = true, helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, ariaDescribedBy, enableAutocomplete = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18313,6 +18329,7 @@ const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter P
         leftCategory: undefined,
         hideLabel,
         disabled,
+        labelPosition,
     };
     const [inputValue, setInputValue] = a$n.useState("");
     const [show, setShow] = a$n.useState(!isHidden);
@@ -18351,7 +18368,7 @@ const formatDynamicNumbersWithCommas = (num, decimalPlaces, isDegrees) => {
         : "";
 };
 
-const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, allowNegativeNumbers = false, ariaDescribedBy, enableAutocomplete = false, isDegrees = false, }) => {
+const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, allowNegativeNumbers = false, ariaDescribedBy, enableAutocomplete = false, isDegrees = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18367,6 +18384,7 @@ const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, la
         leftCategory,
         hideLabel,
         disabled,
+        labelPosition,
     };
     const [inputValue, setInputValue] = a$n.useState("");
     const [placeholderText, setPlaceholderText] = a$n.useState(placeholder);
@@ -22115,6 +22133,7 @@ const HeaderRow = styled.tr `
   background-color: ${Styles.color.grey.pale};
   min-height: 50px;
   height: 50px;
+  display: ${({ $isEmpty }) => ($isEmpty ? "none" : "table-row")};
 `;
 const CellRow = styled.tr `
   min-height: 50px;
@@ -22328,6 +22347,7 @@ const LoadingShimmer = styled.div `
 `;
 const CustomPagination = styled(Pagination) `
   border-top: ${({ $hasData }) => $hasData ? "0px" : `1px solid ${Styles.color.grey.light}`};
+  display: ${({ $isEmpty }) => ($isEmpty ? "none" : "flex")};
 `;
 const KebabAlign = styled.div `
   display: flex;
@@ -22344,12 +22364,8 @@ const EmptyTableSection = styled.section `
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  position: absolute;
   gap: 20px;
-  top: 50px;
-  left: 0;
-  right: 0;
-  margin: 80px auto 0;
+  margin: 0 auto;
 `;
 const EmptyTableHeader = styled.p `
   display: flex;
@@ -23001,7 +23017,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                     }, key: index + "loading-row" }, Array.from({
                     length: 10,
                 }).map((_, i) => (a$n.createElement(LoadingShimmer, { key: `${i}-loading`, "$width": "110px", "$height": "25px" }))))))))) : (a$n.createElement(StyledTable, { id: `${id}-table`, ...htmlProps },
-                a$n.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a$n.createElement(HeaderRow, { key: headerGroup.id }, headerGroup.headers.map((header, i) => {
+                a$n.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a$n.createElement(HeaderRow, { key: headerGroup.id, "$isEmpty": table.getRowModel().rows.length === 0 }, headerGroup.headers.map((header, i) => {
                     return (a$n.createElement(TableHeaderCell, { key: header.id, serverSide: serverSide, header: header, filters: filters, sorting: sorting, scrollPosition: scrollState, onFilterMenuInteraction: (id, active) => {
                             setFilterMenuOpen((prev) => ({
                                 ...prev,
@@ -23067,7 +23083,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                             renderExpandedRow &&
                             !!renderExpandedRow(row) && (a$n.createElement(ExpandedContentRow, null,
                             a$n.createElement(ExpandedContentCell, { colSpan: table.getVisibleLeafColumns().length }, renderExpandedRow(row))))))))))),
-            showPagination && paginationDetails?.totalRows > 0 && (a$n.createElement(CustomPagination, { "$hasData": table.getRowModel().rows.length > 0, totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
+            showPagination && paginationDetails?.totalRows > 0 && (a$n.createElement(CustomPagination, { "$hasData": table.getRowModel().rows.length > 0, "$isEmpty": table.getRowModel().rows.length === 0, totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
                     table.toggleAllRowsSelected(false);
                     setPageIndex(page);
                     setPagination((prev) => ({