@geomak/ui 5.0.1 → 5.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +250 -156
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +60 -66
- package/dist/index.d.ts +60 -66
- package/dist/index.js +252 -154
- package/dist/index.js.map +1 -1
- package/dist/styles.css +112 -19
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.cjs';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
-
import React$1
|
|
3
|
+
import React$1 from 'react';
|
|
4
4
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
5
5
|
|
|
6
6
|
declare const Icon: {
|
|
@@ -560,26 +560,38 @@ type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-ri
|
|
|
560
560
|
interface NotificationPayload {
|
|
561
561
|
title: React$1.ReactNode;
|
|
562
562
|
description?: React$1.ReactNode;
|
|
563
|
-
/** Auto-dismiss duration in ms (default 4000) */
|
|
563
|
+
/** Auto-dismiss duration in ms (default 4000). Pass `Infinity` to disable auto-dismiss. */
|
|
564
564
|
duration?: number;
|
|
565
565
|
type?: NotificationType;
|
|
566
566
|
}
|
|
567
567
|
/** ─────────────────── provider ─────────────────── */
|
|
568
568
|
/**
|
|
569
|
-
* Wrap your app in `NotificationProvider`, then call `useNotification()`
|
|
569
|
+
* Wrap your app in `NotificationProvider`, then call `useNotification()`
|
|
570
|
+
* anywhere inside to show toast notifications.
|
|
570
571
|
*
|
|
571
|
-
* @param position
|
|
572
|
+
* @param position One of 6 viewport positions (default `'top-right'`).
|
|
572
573
|
*
|
|
573
574
|
* @example
|
|
574
575
|
* <NotificationProvider position="bottom-right">
|
|
575
576
|
* <App />
|
|
576
577
|
* </NotificationProvider>
|
|
578
|
+
*
|
|
579
|
+
* // anywhere inside:
|
|
580
|
+
* const { success, danger } = useNotification()
|
|
581
|
+
* success({ title: 'Saved', description: 'Changes were stored.' })
|
|
577
582
|
*/
|
|
578
583
|
declare function NotificationProvider({ children, position, }: {
|
|
579
584
|
children: React$1.ReactNode;
|
|
580
585
|
position?: NotificationPosition;
|
|
581
586
|
}): react_jsx_runtime.JSX.Element;
|
|
582
587
|
/** ─────────────────── hook ─────────────────── */
|
|
588
|
+
/**
|
|
589
|
+
* Returns four type-specific show functions.
|
|
590
|
+
*
|
|
591
|
+
* @example
|
|
592
|
+
* const { info, success, warning, danger } = useNotification()
|
|
593
|
+
* danger({ title: 'Save failed', description: 'Could not reach the server.' })
|
|
594
|
+
*/
|
|
583
595
|
declare function useNotification(): {
|
|
584
596
|
info: (props: Omit<NotificationPayload, "type">) => void;
|
|
585
597
|
success: (props: Omit<NotificationPayload, "type">) => void;
|
|
@@ -587,7 +599,7 @@ declare function useNotification(): {
|
|
|
587
599
|
danger: (props: Omit<NotificationPayload, "type">) => void;
|
|
588
600
|
};
|
|
589
601
|
|
|
590
|
-
type LoadingSpinnerSize = 'sm' | 'md' | 'lg';
|
|
602
|
+
type LoadingSpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
591
603
|
interface LoadingSpinnerProps {
|
|
592
604
|
/**
|
|
593
605
|
* Text revealed letter-by-letter beneath the spinner. Optional — pass
|
|
@@ -708,22 +720,50 @@ interface ListProps {
|
|
|
708
720
|
declare function List({ items, onItemClick, activeKey }: ListProps): react_jsx_runtime.JSX.Element;
|
|
709
721
|
|
|
710
722
|
interface ScalableContainerProps {
|
|
723
|
+
/** Resting width. Any CSS length / percent. Default `'100%'`. */
|
|
711
724
|
width?: React$1.CSSProperties['width'];
|
|
725
|
+
/** Resting height. Any CSS length / percent. Default `'auto'`. */
|
|
712
726
|
height?: React$1.CSSProperties['height'];
|
|
727
|
+
/** Content to render inside. */
|
|
713
728
|
children?: React$1.ReactNode;
|
|
714
|
-
/** CSS class
|
|
729
|
+
/** CSS class appended to the expanded children wrapper. */
|
|
715
730
|
assignClassOnClick?: string;
|
|
731
|
+
/** Override the expand-button icon. */
|
|
732
|
+
expandIcon?: React$1.ReactNode;
|
|
733
|
+
/** Override the collapse-button icon. */
|
|
734
|
+
collapseIcon?: React$1.ReactNode;
|
|
735
|
+
/**
|
|
736
|
+
* Position of the toggle button inside the container.
|
|
737
|
+
* Default `'top-right'` — matches the OS-window convention.
|
|
738
|
+
*/
|
|
739
|
+
togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
716
740
|
}
|
|
717
741
|
/**
|
|
718
|
-
* Container that
|
|
719
|
-
*
|
|
742
|
+
* Container that smoothly expands to fill its parent on click and
|
|
743
|
+
* collapses back to its resting size. Reads like a macOS / Windows
|
|
744
|
+
* window resizing — subtle elevation shift, smooth scale, no flash
|
|
745
|
+
* of colour or harsh background change.
|
|
746
|
+
*
|
|
747
|
+
* **What's different from the previous version**
|
|
748
|
+
* - Animates BOTH width and height (was width-only).
|
|
749
|
+
* - No baked-in background — the container is transparent by default,
|
|
750
|
+
* so it overlays whatever surface the consumer puts behind it.
|
|
751
|
+
* - Shadow lifts on expand (`shadow-md` → `shadow-2xl`) like a window
|
|
752
|
+
* being raised. No colour change.
|
|
753
|
+
* - The toggle button is a plain rounded chip with the chevron icon,
|
|
754
|
+
* not the old `IconButton` with the heavy background. Floats over
|
|
755
|
+
* the content via absolute positioning so it doesn't push layout.
|
|
756
|
+
* - Configurable toggle position (default top-right, matching OS
|
|
757
|
+
* close-button convention).
|
|
720
758
|
*
|
|
721
759
|
* @example
|
|
722
|
-
*
|
|
723
|
-
*
|
|
760
|
+
* ```tsx
|
|
761
|
+
* <ScalableContainer width={480} height={300}>
|
|
762
|
+
* <Chart data={metrics} />
|
|
724
763
|
* </ScalableContainer>
|
|
764
|
+
* ```
|
|
725
765
|
*/
|
|
726
|
-
declare function ScalableContainer({ width, height, children, assignClassOnClick, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
|
|
766
|
+
declare function ScalableContainer({ width, height, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
|
|
727
767
|
|
|
728
768
|
interface GridCardItem {
|
|
729
769
|
key: string | number;
|
|
@@ -809,50 +849,6 @@ interface CatalogProps {
|
|
|
809
849
|
*/
|
|
810
850
|
declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps): react_jsx_runtime.JSX.Element;
|
|
811
851
|
|
|
812
|
-
interface MenuBarItemProps {
|
|
813
|
-
icon: React$1.ReactNode;
|
|
814
|
-
isActive: boolean;
|
|
815
|
-
title: string;
|
|
816
|
-
/** Called when the item is clicked (navigation or logout etc.) */
|
|
817
|
-
onClick?: () => void;
|
|
818
|
-
}
|
|
819
|
-
/**
|
|
820
|
-
* Single item in the MenuBar sidebar.
|
|
821
|
-
*
|
|
822
|
-
* Decoupled from React Router and context — navigation is delegated to `onClick`.
|
|
823
|
-
* The Tooltip is powered by Radix (same as the standalone Tooltip component).
|
|
824
|
-
*
|
|
825
|
-
* @example
|
|
826
|
-
* <MenuBarItem
|
|
827
|
-
* icon={<Icon.Dashboard />}
|
|
828
|
-
* title="Dashboard"
|
|
829
|
-
* isActive={pathname === '/dashboard'}
|
|
830
|
-
* onClick={() => navigate('/dashboard')}
|
|
831
|
-
* />
|
|
832
|
-
*/
|
|
833
|
-
declare function MenuBarItem({ icon, isActive, title, onClick }: MenuBarItemProps): react_jsx_runtime.JSX.Element;
|
|
834
|
-
|
|
835
|
-
interface MenuBarItemConfig extends MenuBarItemProps {
|
|
836
|
-
key: string;
|
|
837
|
-
}
|
|
838
|
-
interface MenuBarProps {
|
|
839
|
-
items: MenuBarItemConfig[];
|
|
840
|
-
}
|
|
841
|
-
/**
|
|
842
|
-
* Vertical icon sidebar (left edge of the app).
|
|
843
|
-
*
|
|
844
|
-
* Decoupled from React Router, useAuth, and useData.
|
|
845
|
-
* The app composes the items array (with `onClick` handlers) and passes it in.
|
|
846
|
-
*
|
|
847
|
-
* @example
|
|
848
|
-
* const items: MenuBarItemConfig[] = [
|
|
849
|
-
* { key: 'dash', icon: <Icon.Dashboard />, title: 'Dashboard', isActive: pathname === '/dashboard', onClick: () => navigate('/dashboard') },
|
|
850
|
-
* { key: 'logout', icon: <Icon.PowerOff />, title: 'Sign Out', isActive: false, onClick: logOut },
|
|
851
|
-
* ]
|
|
852
|
-
* <MenuBar items={items} />
|
|
853
|
-
*/
|
|
854
|
-
declare function MenuBar({ items }: MenuBarProps): react_jsx_runtime.JSX.Element;
|
|
855
|
-
|
|
856
852
|
/**
|
|
857
853
|
* A single action in the context menu.
|
|
858
854
|
*
|
|
@@ -1650,15 +1646,6 @@ interface SearchInputProps {
|
|
|
1650
1646
|
*/
|
|
1651
1647
|
declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
1652
1648
|
|
|
1653
|
-
interface DropdownPillProps {
|
|
1654
|
-
value?: ReactNode;
|
|
1655
|
-
hasSiblings?: boolean;
|
|
1656
|
-
}
|
|
1657
|
-
/**
|
|
1658
|
-
* Pill chip used inside Dropdown to display selected values.
|
|
1659
|
-
*/
|
|
1660
|
-
declare function DropdownPill({ value, hasSiblings }: DropdownPillProps): react_jsx_runtime.JSX.Element;
|
|
1661
|
-
|
|
1662
1649
|
interface CheckboxProps {
|
|
1663
1650
|
/** Controlled checked state */
|
|
1664
1651
|
checked?: boolean;
|
|
@@ -1753,6 +1740,13 @@ interface DropdownProps {
|
|
|
1753
1740
|
disabled?: boolean;
|
|
1754
1741
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
1755
1742
|
layout?: 'horizontal' | 'vertical';
|
|
1743
|
+
/**
|
|
1744
|
+
* Show a "+N more" pill alongside the first selected item in multiselect
|
|
1745
|
+
* mode. Defaults to `false` — a single pill is shown with the first
|
|
1746
|
+
* selection and consumers typically open the dropdown to see the rest.
|
|
1747
|
+
* Set `true` if you want the count visible on the trigger.
|
|
1748
|
+
*/
|
|
1749
|
+
showSelectedCount?: boolean;
|
|
1756
1750
|
errorMessage?: React$1.ReactNode;
|
|
1757
1751
|
style?: React$1.CSSProperties;
|
|
1758
1752
|
htmlFor?: string;
|
|
@@ -1775,7 +1769,7 @@ interface DropdownProps {
|
|
|
1775
1769
|
* // Multi-select
|
|
1776
1770
|
* <Dropdown isMultiselect label="Fuels" items={fuels} value={form.fuels} onChange={handleChange} />
|
|
1777
1771
|
*/
|
|
1778
|
-
declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
1772
|
+
declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, showSelectedCount, }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
1779
1773
|
|
|
1780
1774
|
interface AutoCompleteItem {
|
|
1781
1775
|
key: string;
|
|
@@ -1986,4 +1980,4 @@ type TemporalPickerProps = DatePickerProps;
|
|
|
1986
1980
|
*/
|
|
1987
1981
|
declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
1988
1982
|
|
|
1989
|
-
export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem,
|
|
1983
|
+
export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, DatePicker as Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.js';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
-
import React$1
|
|
3
|
+
import React$1 from 'react';
|
|
4
4
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
5
5
|
|
|
6
6
|
declare const Icon: {
|
|
@@ -560,26 +560,38 @@ type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-ri
|
|
|
560
560
|
interface NotificationPayload {
|
|
561
561
|
title: React$1.ReactNode;
|
|
562
562
|
description?: React$1.ReactNode;
|
|
563
|
-
/** Auto-dismiss duration in ms (default 4000) */
|
|
563
|
+
/** Auto-dismiss duration in ms (default 4000). Pass `Infinity` to disable auto-dismiss. */
|
|
564
564
|
duration?: number;
|
|
565
565
|
type?: NotificationType;
|
|
566
566
|
}
|
|
567
567
|
/** ─────────────────── provider ─────────────────── */
|
|
568
568
|
/**
|
|
569
|
-
* Wrap your app in `NotificationProvider`, then call `useNotification()`
|
|
569
|
+
* Wrap your app in `NotificationProvider`, then call `useNotification()`
|
|
570
|
+
* anywhere inside to show toast notifications.
|
|
570
571
|
*
|
|
571
|
-
* @param position
|
|
572
|
+
* @param position One of 6 viewport positions (default `'top-right'`).
|
|
572
573
|
*
|
|
573
574
|
* @example
|
|
574
575
|
* <NotificationProvider position="bottom-right">
|
|
575
576
|
* <App />
|
|
576
577
|
* </NotificationProvider>
|
|
578
|
+
*
|
|
579
|
+
* // anywhere inside:
|
|
580
|
+
* const { success, danger } = useNotification()
|
|
581
|
+
* success({ title: 'Saved', description: 'Changes were stored.' })
|
|
577
582
|
*/
|
|
578
583
|
declare function NotificationProvider({ children, position, }: {
|
|
579
584
|
children: React$1.ReactNode;
|
|
580
585
|
position?: NotificationPosition;
|
|
581
586
|
}): react_jsx_runtime.JSX.Element;
|
|
582
587
|
/** ─────────────────── hook ─────────────────── */
|
|
588
|
+
/**
|
|
589
|
+
* Returns four type-specific show functions.
|
|
590
|
+
*
|
|
591
|
+
* @example
|
|
592
|
+
* const { info, success, warning, danger } = useNotification()
|
|
593
|
+
* danger({ title: 'Save failed', description: 'Could not reach the server.' })
|
|
594
|
+
*/
|
|
583
595
|
declare function useNotification(): {
|
|
584
596
|
info: (props: Omit<NotificationPayload, "type">) => void;
|
|
585
597
|
success: (props: Omit<NotificationPayload, "type">) => void;
|
|
@@ -587,7 +599,7 @@ declare function useNotification(): {
|
|
|
587
599
|
danger: (props: Omit<NotificationPayload, "type">) => void;
|
|
588
600
|
};
|
|
589
601
|
|
|
590
|
-
type LoadingSpinnerSize = 'sm' | 'md' | 'lg';
|
|
602
|
+
type LoadingSpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
591
603
|
interface LoadingSpinnerProps {
|
|
592
604
|
/**
|
|
593
605
|
* Text revealed letter-by-letter beneath the spinner. Optional — pass
|
|
@@ -708,22 +720,50 @@ interface ListProps {
|
|
|
708
720
|
declare function List({ items, onItemClick, activeKey }: ListProps): react_jsx_runtime.JSX.Element;
|
|
709
721
|
|
|
710
722
|
interface ScalableContainerProps {
|
|
723
|
+
/** Resting width. Any CSS length / percent. Default `'100%'`. */
|
|
711
724
|
width?: React$1.CSSProperties['width'];
|
|
725
|
+
/** Resting height. Any CSS length / percent. Default `'auto'`. */
|
|
712
726
|
height?: React$1.CSSProperties['height'];
|
|
727
|
+
/** Content to render inside. */
|
|
713
728
|
children?: React$1.ReactNode;
|
|
714
|
-
/** CSS class
|
|
729
|
+
/** CSS class appended to the expanded children wrapper. */
|
|
715
730
|
assignClassOnClick?: string;
|
|
731
|
+
/** Override the expand-button icon. */
|
|
732
|
+
expandIcon?: React$1.ReactNode;
|
|
733
|
+
/** Override the collapse-button icon. */
|
|
734
|
+
collapseIcon?: React$1.ReactNode;
|
|
735
|
+
/**
|
|
736
|
+
* Position of the toggle button inside the container.
|
|
737
|
+
* Default `'top-right'` — matches the OS-window convention.
|
|
738
|
+
*/
|
|
739
|
+
togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
716
740
|
}
|
|
717
741
|
/**
|
|
718
|
-
* Container that
|
|
719
|
-
*
|
|
742
|
+
* Container that smoothly expands to fill its parent on click and
|
|
743
|
+
* collapses back to its resting size. Reads like a macOS / Windows
|
|
744
|
+
* window resizing — subtle elevation shift, smooth scale, no flash
|
|
745
|
+
* of colour or harsh background change.
|
|
746
|
+
*
|
|
747
|
+
* **What's different from the previous version**
|
|
748
|
+
* - Animates BOTH width and height (was width-only).
|
|
749
|
+
* - No baked-in background — the container is transparent by default,
|
|
750
|
+
* so it overlays whatever surface the consumer puts behind it.
|
|
751
|
+
* - Shadow lifts on expand (`shadow-md` → `shadow-2xl`) like a window
|
|
752
|
+
* being raised. No colour change.
|
|
753
|
+
* - The toggle button is a plain rounded chip with the chevron icon,
|
|
754
|
+
* not the old `IconButton` with the heavy background. Floats over
|
|
755
|
+
* the content via absolute positioning so it doesn't push layout.
|
|
756
|
+
* - Configurable toggle position (default top-right, matching OS
|
|
757
|
+
* close-button convention).
|
|
720
758
|
*
|
|
721
759
|
* @example
|
|
722
|
-
*
|
|
723
|
-
*
|
|
760
|
+
* ```tsx
|
|
761
|
+
* <ScalableContainer width={480} height={300}>
|
|
762
|
+
* <Chart data={metrics} />
|
|
724
763
|
* </ScalableContainer>
|
|
764
|
+
* ```
|
|
725
765
|
*/
|
|
726
|
-
declare function ScalableContainer({ width, height, children, assignClassOnClick, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
|
|
766
|
+
declare function ScalableContainer({ width, height, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
|
|
727
767
|
|
|
728
768
|
interface GridCardItem {
|
|
729
769
|
key: string | number;
|
|
@@ -809,50 +849,6 @@ interface CatalogProps {
|
|
|
809
849
|
*/
|
|
810
850
|
declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps): react_jsx_runtime.JSX.Element;
|
|
811
851
|
|
|
812
|
-
interface MenuBarItemProps {
|
|
813
|
-
icon: React$1.ReactNode;
|
|
814
|
-
isActive: boolean;
|
|
815
|
-
title: string;
|
|
816
|
-
/** Called when the item is clicked (navigation or logout etc.) */
|
|
817
|
-
onClick?: () => void;
|
|
818
|
-
}
|
|
819
|
-
/**
|
|
820
|
-
* Single item in the MenuBar sidebar.
|
|
821
|
-
*
|
|
822
|
-
* Decoupled from React Router and context — navigation is delegated to `onClick`.
|
|
823
|
-
* The Tooltip is powered by Radix (same as the standalone Tooltip component).
|
|
824
|
-
*
|
|
825
|
-
* @example
|
|
826
|
-
* <MenuBarItem
|
|
827
|
-
* icon={<Icon.Dashboard />}
|
|
828
|
-
* title="Dashboard"
|
|
829
|
-
* isActive={pathname === '/dashboard'}
|
|
830
|
-
* onClick={() => navigate('/dashboard')}
|
|
831
|
-
* />
|
|
832
|
-
*/
|
|
833
|
-
declare function MenuBarItem({ icon, isActive, title, onClick }: MenuBarItemProps): react_jsx_runtime.JSX.Element;
|
|
834
|
-
|
|
835
|
-
interface MenuBarItemConfig extends MenuBarItemProps {
|
|
836
|
-
key: string;
|
|
837
|
-
}
|
|
838
|
-
interface MenuBarProps {
|
|
839
|
-
items: MenuBarItemConfig[];
|
|
840
|
-
}
|
|
841
|
-
/**
|
|
842
|
-
* Vertical icon sidebar (left edge of the app).
|
|
843
|
-
*
|
|
844
|
-
* Decoupled from React Router, useAuth, and useData.
|
|
845
|
-
* The app composes the items array (with `onClick` handlers) and passes it in.
|
|
846
|
-
*
|
|
847
|
-
* @example
|
|
848
|
-
* const items: MenuBarItemConfig[] = [
|
|
849
|
-
* { key: 'dash', icon: <Icon.Dashboard />, title: 'Dashboard', isActive: pathname === '/dashboard', onClick: () => navigate('/dashboard') },
|
|
850
|
-
* { key: 'logout', icon: <Icon.PowerOff />, title: 'Sign Out', isActive: false, onClick: logOut },
|
|
851
|
-
* ]
|
|
852
|
-
* <MenuBar items={items} />
|
|
853
|
-
*/
|
|
854
|
-
declare function MenuBar({ items }: MenuBarProps): react_jsx_runtime.JSX.Element;
|
|
855
|
-
|
|
856
852
|
/**
|
|
857
853
|
* A single action in the context menu.
|
|
858
854
|
*
|
|
@@ -1650,15 +1646,6 @@ interface SearchInputProps {
|
|
|
1650
1646
|
*/
|
|
1651
1647
|
declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
1652
1648
|
|
|
1653
|
-
interface DropdownPillProps {
|
|
1654
|
-
value?: ReactNode;
|
|
1655
|
-
hasSiblings?: boolean;
|
|
1656
|
-
}
|
|
1657
|
-
/**
|
|
1658
|
-
* Pill chip used inside Dropdown to display selected values.
|
|
1659
|
-
*/
|
|
1660
|
-
declare function DropdownPill({ value, hasSiblings }: DropdownPillProps): react_jsx_runtime.JSX.Element;
|
|
1661
|
-
|
|
1662
1649
|
interface CheckboxProps {
|
|
1663
1650
|
/** Controlled checked state */
|
|
1664
1651
|
checked?: boolean;
|
|
@@ -1753,6 +1740,13 @@ interface DropdownProps {
|
|
|
1753
1740
|
disabled?: boolean;
|
|
1754
1741
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
1755
1742
|
layout?: 'horizontal' | 'vertical';
|
|
1743
|
+
/**
|
|
1744
|
+
* Show a "+N more" pill alongside the first selected item in multiselect
|
|
1745
|
+
* mode. Defaults to `false` — a single pill is shown with the first
|
|
1746
|
+
* selection and consumers typically open the dropdown to see the rest.
|
|
1747
|
+
* Set `true` if you want the count visible on the trigger.
|
|
1748
|
+
*/
|
|
1749
|
+
showSelectedCount?: boolean;
|
|
1756
1750
|
errorMessage?: React$1.ReactNode;
|
|
1757
1751
|
style?: React$1.CSSProperties;
|
|
1758
1752
|
htmlFor?: string;
|
|
@@ -1775,7 +1769,7 @@ interface DropdownProps {
|
|
|
1775
1769
|
* // Multi-select
|
|
1776
1770
|
* <Dropdown isMultiselect label="Fuels" items={fuels} value={form.fuels} onChange={handleChange} />
|
|
1777
1771
|
*/
|
|
1778
|
-
declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
1772
|
+
declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, showSelectedCount, }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
1779
1773
|
|
|
1780
1774
|
interface AutoCompleteItem {
|
|
1781
1775
|
key: string;
|
|
@@ -1986,4 +1980,4 @@ type TemporalPickerProps = DatePickerProps;
|
|
|
1986
1980
|
*/
|
|
1987
1981
|
declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
1988
1982
|
|
|
1989
|
-
export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem,
|
|
1983
|
+
export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, DatePicker as Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
|