pallote-react 0.16.9 → 0.16.10

package/dist/components/Section.d.ts

@@ -5,9 +5,8 @@ export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
     align?: SectionAlign;
     color?: SectionColor;
     landing?: boolean;
-    header?: boolean;
     className?: string;
     children: ReactNode;
 }
-export declare const Section: ({ align, color, landing, header, className, children, ...props }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Section: ({ align, color, landing, className, children, ...props }: SectionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SectionHeader.d.ts

@@ -1,13 +1,13 @@
 import { HTMLAttributes, ReactNode } from 'react';
-type TitleComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+type TitleLevel = 1 | 2 | 3;
 export interface SectionHeaderProps extends HTMLAttributes<HTMLDivElement> {
     label?: string;
     title: string;
-    promoteTitle?: boolean;
-    titleComponent?: TitleComponent;
+    titleLevel?: TitleLevel;
     subtitle?: ReactNode;
     actions?: ReactNode;
+    actionsPosition?: 'right' | 'bottom';
     className?: string;
 }
-export declare const SectionHeader: ({ label, title, promoteTitle, titleComponent, subtitle, actions, className, ...props }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionHeader: ({ label, title, titleLevel, subtitle, actions, actionsPosition, className, ...props }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.js

@@ -802,7 +802,7 @@ function ColumnFilter({ header }) {
         const options = filterOptions.map(normalizeFilterOption);
         return (jsxs(Select, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, className: "datatable_filter", value: filterValue, onChange: (e) => header.column.setFilterValue(e.target.value || undefined), children: [jsx("option", { value: "", children: "All" }), options.map(({ value, label }) => (jsx("option", { value: value, children: label }, value)))] }));
     }
-    return (jsx(Input, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, placeholder: "Filter...", className: "datatable_filter", value: filterValue, onChange: (e) => header.column.setFilterValue(e.target.value || undefined) }));
+    return (jsx(Input, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, placeholder: "Search column", className: "datatable_filter", value: filterValue, onChange: (e) => header.column.setFilterValue(e.target.value || undefined) }));
 }
 function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder = 'Search...', pageSize: initialPageSize = 10, pageSizeOptions = [10, 25, 50, 100], striped, hasHover = true, dense, border, kind: defaultKind, className, ...props }) {
     const [sorting, setSorting] = useState([]);
@@ -945,26 +945,31 @@ const Nav = ({ direction, dense, className, children, ...props }) => {
         ]), ...props, children: jsx("div", { className: 'nav_container', children: children }) }));
 };
 
-const SectionHeader = ({ label, title, promoteTitle = false, titleComponent = 'h2', subtitle, actions, className, ...props }) => {
+const SectionHeader = ({ label, title, titleLevel = 2, subtitle, actions, actionsPosition, className, ...props }) => {
+    const titleVariant = titleLevel === 1 ? 'h2' : titleLevel === 2 ? 'h3' : 'h4';
+    const titleComponent = titleLevel === 1 ? 'h1' : titleLevel === 2 ? 'h2' : 'h3';
     return (jsxs("div", { className: classnames([
             'section_header',
+            `section_header-${titleLevel}`,
             className
-        ]), ...props, children: [label ? jsx(Text, { className: classnames('section_label'), children: label }) : null, jsx(Text, { className: "section_title", component: titleComponent || (promoteTitle ? 'h1' : 'h2'), children: title }), subtitle ? jsx("div", { className: classnames('section_subtitle'), children: subtitle }) : null, actions ? (jsx("div", { className: "section_actions", children: actions })) : null] }));
+        ]), ...props, children: [label ? jsx(Text, { className: classnames('section_label'), children: label }) : null, jsxs("div", { className: "section_titleWrapper", children: [jsx(Text, { className: "section_title", variant: titleVariant, component: titleComponent, children: title }), actions && actionsPosition === 'right' ? (jsx(Display, { hide: "tablet", children: jsx("div", { className: "section_actions", children: actions }) })) : null] }), subtitle ? jsx("div", { className: classnames('section_subtitle'), children: subtitle }) : null, actions ? (actionsPosition === 'right' ? (jsx(Display, { show: "tablet", children: jsx("div", { className: "section_actions", children: actions }) })) : (jsx("div", { className: "section_actions", children: actions }))) : null] }));
 };
 
-const Section = ({ align = 'left', color = 'default', landing, header, className, children, ...props }) => {
+const Section = ({ align = 'left', color = 'default', landing, className, children, ...props }) => {
     return (jsx("div", { className: classnames([
             'section',
             {
                 [`section-${align}`]: align,
                 [`section-${color}`]: color,
-                'section-landing': landing,
-                'section-header': header
+                'section-landing': landing
             },
             className
-        ]), ...props, children: jsx("div", { className: 'section_container', children: e__default.Children.map(children, child => {
-                if (e__default.isValidElement(child) && child.type === SectionHeader) {
-                    return e__default.cloneElement(child, { promoteTitle: landing || header });
+        ]), ...props, children: jsx("div", { className: 'section_container', children: Children.map(children, child => {
+                if (isValidElement(child) && child.type === SectionHeader) {
+                    const currentTitleLevel = child.props.titleLevel;
+                    return cloneElement(child, {
+                        titleLevel: currentTitleLevel ?? (landing ? 1 : 2)
+                    });
                 }
                 return child;
             }) }) }));

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.16.9",
+  "version": "0.16.10",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.16.9",
+  "version": "0.16.10",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",