pallote-react 0.16.9 → 0.16.11

package/dist/components/Alert.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 type AlertColor = 'success' | 'info' | 'warning' | 'error';
 type AlertVariant = 'bar' | 'toast' | 'notice';
 export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
@@ -6,11 +6,12 @@ export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
     variant?: AlertVariant;
     title: string;
     subtitle?: string;
+    actions?: ReactNode;
     dense?: boolean;
     noIcon?: boolean;
     show?: boolean;
     onClose?: () => void;
     className?: string;
 }
-export declare const Alert: ({ color, variant, title, subtitle, dense, noIcon, show, onClose, className, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ color, variant, title, subtitle, actions, dense, noIcon, show, onClose, className, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -272,7 +272,7 @@ const a$6 = /* @__PURE__ */ new Map([
 const e$7 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$6 }));
 e$7.displayName = "XIcon";
 
-const Alert = ({ color = 'success', variant = 'toast', title, subtitle, dense, noIcon, show, onClose, className, ...props }) => {
+const Alert = ({ color = 'success', variant = 'toast', title, subtitle, actions, dense, noIcon, show, onClose, className, ...props }) => {
     const [shouldRender, setRender] = useState(show);
     const [container] = useState(() => {
         let el = document.getElementById('alerts');
@@ -302,7 +302,7 @@ const Alert = ({ color = 'success', variant = 'toast', title, subtitle, dense, n
                 'alert-noIcon': noIcon
             },
             className
-        ]), onAnimationEnd: onAnimationEnd, ...props, children: [jsxs("div", { className: classnames('alert_content'), children: [title ? jsx(Text, { className: classnames('alert_title'), variant: dense ? 'caption' : 'body', weight: 'bold', children: title }) : null, subtitle ? jsx(Text, { variant: dense ? 'overline' : 'caption', className: classnames('alert_subtitle'), children: subtitle }) : null] }), onClose ? (jsx("button", { type: "button", className: classnames('alert_close'), onClick: onClose, "aria-label": "Dismiss alert", children: jsx(e$7, { size: dense ? 14 : 16, "aria-hidden": "true" }) })) : null] }));
+        ]), onAnimationEnd: onAnimationEnd, ...props, children: [jsxs("div", { className: classnames('alert_content'), children: [title ? jsx(Text, { className: classnames('alert_title'), variant: dense ? 'caption' : 'body', weight: 'bold', children: title }) : null, subtitle ? jsx(Text, { variant: dense ? 'overline' : 'caption', className: classnames('alert_subtitle'), children: subtitle }) : null] }), actions ? jsx("div", { className: classnames('alert_actions'), children: actions }) : null, onClose ? (jsx("button", { type: "button", className: classnames('alert_close'), onClick: onClose, "aria-label": "Dismiss alert", children: jsx(e$7, { size: dense ? 14 : 16, "aria-hidden": "true" }) })) : null] }));
     if (variant === 'notice') {
         return jsx(Fragment, { children: alert });
     }
@@ -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.11",
   "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.11",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "classnames": "^2.5.1",
     "react-syntax-highlighter": "^15.6.1",
     "sass": "^1.71.1",
-    "pallote-css": "^0.10.2"
+    "pallote-css": "^0.10.6"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",