@hyphen/hyphen-components 7.2.0 → 7.3.0
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/components/Sidebar/Sidebar.d.ts +20 -13
- package/dist/components/Sidebar/Sidebar.stories.d.ts +2 -0
- package/dist/hyphen-components.cjs.development.js +241 -146
- package/dist/hyphen-components.cjs.development.js.map +1 -1
- package/dist/hyphen-components.cjs.production.min.js +1 -1
- package/dist/hyphen-components.cjs.production.min.js.map +1 -1
- package/dist/hyphen-components.esm.js +241 -146
- package/dist/hyphen-components.esm.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Sidebar/Sidebar.stories.tsx +104 -1
- package/src/components/Sidebar/Sidebar.test.tsx +63 -2
- package/src/components/Sidebar/Sidebar.tsx +335 -160
|
@@ -1,27 +1,34 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IconName } from 'src/types';
|
|
3
3
|
import { TooltipContent } from '../Tooltip/Tooltip';
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
type SidebarSide = 'left' | 'right';
|
|
5
|
+
type SidebarOpenState = Record<SidebarSide, boolean>;
|
|
6
|
+
type SidebarOpenValue = boolean | Partial<SidebarOpenState>;
|
|
7
|
+
type SidebarStorageKey = string | Partial<Record<SidebarSide, string>>;
|
|
8
|
+
declare function useSidebar(sideOverride?: SidebarSide): {
|
|
9
|
+
isMobile: boolean;
|
|
10
|
+
side: SidebarSide;
|
|
11
|
+
state: "expanded" | "collapsed";
|
|
6
12
|
open: boolean;
|
|
7
|
-
setOpen: (open: boolean) => void;
|
|
13
|
+
setOpen: (open: boolean | ((open: boolean) => boolean)) => void;
|
|
8
14
|
openMobile: boolean;
|
|
9
|
-
setOpenMobile: (open: boolean) => void;
|
|
10
|
-
isMobile: boolean;
|
|
15
|
+
setOpenMobile: (open: boolean | ((open: boolean) => boolean)) => void;
|
|
11
16
|
toggleSidebar: () => void;
|
|
12
|
-
}
|
|
13
|
-
declare function useSidebar(): SidebarContextProps;
|
|
17
|
+
};
|
|
14
18
|
declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
|
|
15
|
-
defaultOpen?:
|
|
16
|
-
open?:
|
|
17
|
-
storageKey?:
|
|
18
|
-
onOpenChange?: (open: boolean) => void;
|
|
19
|
+
defaultOpen?: SidebarOpenValue;
|
|
20
|
+
open?: SidebarOpenValue;
|
|
21
|
+
storageKey?: SidebarStorageKey;
|
|
22
|
+
onOpenChange?: (open: boolean, side?: SidebarSide) => void;
|
|
19
23
|
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
20
24
|
declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
|
|
21
|
-
side?: "left";
|
|
25
|
+
side?: "left" | "right";
|
|
22
26
|
collapsible?: "offcanvas" | "icon" | "none";
|
|
23
27
|
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
24
|
-
declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import("../Button/Button").BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement
|
|
28
|
+
declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import("../Button/Button").BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement> & {
|
|
29
|
+
side?: SidebarSide;
|
|
30
|
+
iconName?: IconName;
|
|
31
|
+
}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
25
32
|
declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
26
33
|
declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
27
34
|
declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -4,4 +4,6 @@ import { Sidebar } from './Sidebar';
|
|
|
4
4
|
declare const meta: Meta<typeof Sidebar>;
|
|
5
5
|
export default meta;
|
|
6
6
|
export declare const SidebarExample: () => React.JSX.Element;
|
|
7
|
+
export declare const SidebarRightExample: () => React.JSX.Element;
|
|
8
|
+
export declare const SidebarBothSides: () => React.JSX.Element;
|
|
7
9
|
export declare const SidebarCollapsed: () => React.JSX.Element;
|