@mage-ui/components 1.0.149 → 1.0.151
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/navigations/sidebars/sidebar/Sidebar.d.mts +2 -0
- package/dist/components/navigations/sidebars/sidebar/Sidebar.d.mts.map +1 -1
- package/dist/components/navigations/sidebars/sidebar/Sidebar.mjs +1 -1
- package/dist/components/navigations/sidebars/sidebar/Sidebar.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -25,6 +25,7 @@ type SidebarProps = {
|
|
|
25
25
|
isCollapsed?: boolean;
|
|
26
26
|
defaultCollapsed?: boolean;
|
|
27
27
|
onCollapsedChange?: (collapsed: boolean) => void;
|
|
28
|
+
isOpen?: boolean;
|
|
28
29
|
expandedItems?: string[];
|
|
29
30
|
collapseButtonLabelCollapse?: string;
|
|
30
31
|
collapseButtonLabelExpand?: string;
|
|
@@ -37,6 +38,7 @@ declare const Sidebar: {
|
|
|
37
38
|
isCollapsed,
|
|
38
39
|
defaultCollapsed,
|
|
39
40
|
onCollapsedChange,
|
|
41
|
+
isOpen,
|
|
40
42
|
expandedItems,
|
|
41
43
|
topSlot,
|
|
42
44
|
bottomSlot,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.d.mts","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"mappings":";;;;;;KAwBY,iBAAA;EACV,OAAA;EACA,IAAA;EACA,UAAA;EACA,OAAA;EACA,UAAA;EACA,GAAA;IACE,IAAA;IACA,IAAA;IACA,UAAA;EAAA;EAEF,cAAA;AAAA;AAAA,KAGU,YAAA;EACV,IAAA;EACA,OAAA,GAAU,SAAA;EACV,UAAA,GAAa,SAAA;EACb,UAAA,GAAa,iBAAA;EACb,WAAA;EACA,gBAAA;EACA,iBAAA,IAAqB,SAAA;EACrB,aAAA;EACA,2BAAA;EACA,yBAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Sidebar.d.mts","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"mappings":";;;;;;KAwBY,iBAAA;EACV,OAAA;EACA,IAAA;EACA,UAAA;EACA,OAAA;EACA,UAAA;EACA,GAAA;IACE,IAAA;IACA,IAAA;IACA,UAAA;EAAA;EAEF,cAAA;AAAA;AAAA,KAGU,YAAA;EACV,IAAA;EACA,OAAA,GAAU,SAAA;EACV,UAAA,GAAa,SAAA;EACb,UAAA,GAAa,iBAAA;EACb,WAAA;EACA,gBAAA;EACA,iBAAA,IAAqB,SAAA;EACrB,MAAA;EACA,aAAA;EACA,2BAAA;EACA,yBAAA;EACA,QAAA,GAAW,SAAA;AAAA;AAAA,cAmFA,OAAA;EAAA;;;;;;;;;;;;;KAaV,YAAA,GAAe,SAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{ScrollAreaAutosize as e}from"../../../misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{ButtonIcon as t}from"../../../buttons/button-icon/ButtonIcon.mjs";import{SidebarProvider as n,useSidebarContext as r}from"./SidebarContext.mjs";import{NavList as i}from"./SidebarNavList.mjs";import{NavGroup as a}from"./SidebarNavGroup.mjs";import{NavItem as o}from"./SidebarNavItem.mjs";import{NavItemLink as s}from"./SidebarNavItemLink.mjs";import{SubNavItem as c}from"./SidebarSubNavItem.mjs";import{cx as l}from"@mage-ui/styled-system/css";import{buttonIconRoot as u,sidebar as d,sidebarBottomSlot as f,sidebarNavRoot as p,sidebarRoot as m,sidebarScrollAreaAutosize as h,sidebarTopSlot as g}from"@mage-ui/styled-system/recipes";import{jsx as _,jsxs as v}from"react/jsx-runtime";const y=({area:n=`sidebar`,topSlot:a,bottomSlot:o,classNames:s,collapseButtonLabelCollapse:
|
|
1
|
+
"use client";import{ScrollAreaAutosize as e}from"../../../misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{ButtonIcon as t}from"../../../buttons/button-icon/ButtonIcon.mjs";import{SidebarProvider as n,useSidebarContext as r}from"./SidebarContext.mjs";import{NavList as i}from"./SidebarNavList.mjs";import{NavGroup as a}from"./SidebarNavGroup.mjs";import{NavItem as o}from"./SidebarNavItem.mjs";import{NavItemLink as s}from"./SidebarNavItemLink.mjs";import{SubNavItem as c}from"./SidebarSubNavItem.mjs";import{cx as l}from"@mage-ui/styled-system/css";import{buttonIconRoot as u,sidebar as d,sidebarBottomSlot as f,sidebarNavRoot as p,sidebarRoot as m,sidebarScrollAreaAutosize as h,sidebarTopSlot as g}from"@mage-ui/styled-system/recipes";import{jsx as _,jsxs as v}from"react/jsx-runtime";const y=({area:n=`sidebar`,topSlot:a,bottomSlot:o,classNames:s,isOpen:c,collapseButtonLabelCollapse:y=`Collapse`,collapseButtonLabelExpand:b=`Expand`,children:x})=>{let{isCollapsed:S,toggleCollapsed:C}=r(),w=n===`sidebar`?void 0:{"--sidebar-grid-area":n};return v(`div`,{"data-collapsed":S?`true`:`false`,"data-open":c,className:l(s?.sidebar??d(),s?.root??m(),`group`),style:w,children:[a?_(`div`,{className:s?.topSlot??g(),children:a}):null,_(`nav`,{className:s?.nav?.root??p(),children:_(e,{mah:`100%`,scrollbars:`y`,type:`hover`,classNames:{scrollArea:s?.nav?.scrollArea??h()},children:_(i,{classNames:s,children:x})})}),_(`div`,{className:s?.bottomSlot??f(),children:o||_(t,{path:`/icons/sprite-mage.svg`,name:S?`mage-sidebar-expand`:`mage-sidebar-collapse`,label:S?b:y,classNames:{root:s?.collapseButton??u()},onClick:C})})]})},b=({area:e=`sidebar`,classNames:t,isCollapsed:r,defaultCollapsed:i=!1,onCollapsedChange:a,isOpen:o,expandedItems:s,topSlot:c,bottomSlot:l,collapseButtonLabelCollapse:u=`Collapse`,collapseButtonLabelExpand:d=`Expand`,children:f})=>_(n,{isCollapsed:r,defaultCollapsed:i,onCollapsedChange:a,expandedItems:s,children:_(y,{area:e,classNames:t,isOpen:o,topSlot:c,bottomSlot:l,collapseButtonLabelCollapse:u,collapseButtonLabelExpand:d,children:f})});b.displayName=`Sidebar`,b.Item=o,b.Group=a,b.ItemLink=s,b.SubNav=c;export{b as Sidebar};
|
|
2
2
|
//# sourceMappingURL=Sidebar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n buttonIconRoot,\n sidebar,\n sidebarBottomSlot,\n sidebarNavRoot,\n sidebarRoot,\n sidebarScrollAreaAutosize,\n sidebarTopSlot,\n} from '@mage-ui/styled-system/recipes';\nimport { ButtonIcon } from '@/components/buttons';\n\nimport { ScrollAreaAutosize } from '../../../misc';\nimport { SidebarProvider, useSidebarContext } from './SidebarContext';\nimport { NavGroup } from './SidebarNavGroup';\nimport { NavItem } from './SidebarNavItem';\nimport { NavItemLink } from './SidebarNavItemLink';\nimport { NavList } from './SidebarNavList';\nimport { SubNavItem } from './SidebarSubNavItem';\n\nexport type SidebarClassNames = {\n sidebar?: string;\n root?: string;\n scrollArea?: string;\n topSlot?: string;\n bottomSlot?: string;\n nav?: {\n root?: string;\n list?: string;\n scrollArea?: string;\n };\n collapseButton?: string;\n};\n\nexport type SidebarProps = {\n area?: string;\n topSlot?: ReactNode;\n bottomSlot?: ReactNode;\n classNames?: SidebarClassNames;\n isCollapsed?: boolean;\n defaultCollapsed?: boolean;\n onCollapsedChange?: (collapsed: boolean) => void;\n expandedItems?: string[];\n collapseButtonLabelCollapse?: string;\n collapseButtonLabelExpand?: string;\n children?: ReactNode;\n};\n\ntype SidebarContentProps = {\n area?: string;\n topSlot?: ReactNode;\n bottomSlot?: ReactNode;\n classNames?: SidebarClassNames;\n collapseButtonLabelCollapse?: string;\n collapseButtonLabelExpand?: string;\n children?: ReactNode;\n};\n\nconst SidebarContent = ({\n area = 'sidebar',\n topSlot,\n bottomSlot,\n classNames,\n collapseButtonLabelCollapse = 'Collapse',\n collapseButtonLabelExpand = 'Expand',\n children,\n}: SidebarContentProps): ReactNode => {\n const { isCollapsed, toggleCollapsed } = useSidebarContext();\n const style =\n area !== 'sidebar'\n ? ({ '--sidebar-grid-area': area } as CSSProperties &\n Record<string, string>)\n : undefined;\n\n return (\n <div\n data-collapsed={isCollapsed ? 'true' : 'false'}\n className={cx(\n classNames?.sidebar ?? sidebar(),\n classNames?.root ?? sidebarRoot(),\n 'group',\n )}\n style={style}\n >\n {topSlot ? (\n <div className={classNames?.topSlot ?? sidebarTopSlot()}>{topSlot}</div>\n ) : null}\n\n <nav className={classNames?.nav?.root ?? sidebarNavRoot()}>\n <ScrollAreaAutosize\n mah='100%'\n scrollbars='y'\n type='hover'\n classNames={{\n scrollArea:\n classNames?.nav?.scrollArea ?? sidebarScrollAreaAutosize(),\n }}\n >\n <NavList classNames={classNames}>{children}</NavList>\n </ScrollAreaAutosize>\n </nav>\n\n <div className={classNames?.bottomSlot ?? sidebarBottomSlot()}>\n {bottomSlot ? (\n bottomSlot\n ) : (\n <ButtonIcon\n path='/icons/sprite-mage.svg'\n name={isCollapsed ? 'mage-sidebar-expand' : 'mage-sidebar-collapse'}\n label={\n isCollapsed\n ? collapseButtonLabelExpand\n : collapseButtonLabelCollapse\n }\n classNames={{\n root: classNames?.collapseButton ?? buttonIconRoot(),\n }}\n onClick={toggleCollapsed}\n />\n )}\n </div>\n </div>\n );\n};\n\nexport const Sidebar = ({\n area = 'sidebar',\n classNames,\n isCollapsed,\n defaultCollapsed = false,\n onCollapsedChange,\n expandedItems,\n topSlot,\n bottomSlot,\n collapseButtonLabelCollapse = 'Collapse',\n collapseButtonLabelExpand = 'Expand',\n children,\n}: SidebarProps): ReactNode => {\n return (\n <SidebarProvider\n isCollapsed={isCollapsed}\n defaultCollapsed={defaultCollapsed}\n onCollapsedChange={onCollapsedChange}\n expandedItems={expandedItems}\n >\n <SidebarContent\n area={area}\n classNames={classNames}\n topSlot={topSlot}\n bottomSlot={bottomSlot}\n collapseButtonLabelCollapse={collapseButtonLabelCollapse}\n collapseButtonLabelExpand={collapseButtonLabelExpand}\n >\n {children}\n </SidebarContent>\n </SidebarProvider>\n );\n};\n\nSidebar.displayName = 'Sidebar';\nSidebar.Item = NavItem;\nSidebar.Group = NavGroup;\nSidebar.ItemLink = NavItemLink;\nSidebar.SubNav = SubNavItem;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Sidebar.mjs","names":[],"sources":["../../../../../src/components/navigations/sidebars/sidebar/Sidebar.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n buttonIconRoot,\n sidebar,\n sidebarBottomSlot,\n sidebarNavRoot,\n sidebarRoot,\n sidebarScrollAreaAutosize,\n sidebarTopSlot,\n} from '@mage-ui/styled-system/recipes';\nimport { ButtonIcon } from '@/components/buttons';\n\nimport { ScrollAreaAutosize } from '../../../misc';\nimport { SidebarProvider, useSidebarContext } from './SidebarContext';\nimport { NavGroup } from './SidebarNavGroup';\nimport { NavItem } from './SidebarNavItem';\nimport { NavItemLink } from './SidebarNavItemLink';\nimport { NavList } from './SidebarNavList';\nimport { SubNavItem } from './SidebarSubNavItem';\n\nexport type SidebarClassNames = {\n sidebar?: string;\n root?: string;\n scrollArea?: string;\n topSlot?: string;\n bottomSlot?: string;\n nav?: {\n root?: string;\n list?: string;\n scrollArea?: string;\n };\n collapseButton?: string;\n};\n\nexport type SidebarProps = {\n area?: string;\n topSlot?: ReactNode;\n bottomSlot?: ReactNode;\n classNames?: SidebarClassNames;\n isCollapsed?: boolean;\n defaultCollapsed?: boolean;\n onCollapsedChange?: (collapsed: boolean) => void;\n isOpen?: boolean;\n expandedItems?: string[];\n collapseButtonLabelCollapse?: string;\n collapseButtonLabelExpand?: string;\n children?: ReactNode;\n};\n\ntype SidebarContentProps = {\n area?: string;\n topSlot?: ReactNode;\n bottomSlot?: ReactNode;\n classNames?: SidebarClassNames;\n isOpen?: boolean;\n collapseButtonLabelCollapse?: string;\n collapseButtonLabelExpand?: string;\n children?: ReactNode;\n};\n\nconst SidebarContent = ({\n area = 'sidebar',\n topSlot,\n bottomSlot,\n classNames,\n isOpen,\n collapseButtonLabelCollapse = 'Collapse',\n collapseButtonLabelExpand = 'Expand',\n children,\n}: SidebarContentProps): ReactNode => {\n const { isCollapsed, toggleCollapsed } = useSidebarContext();\n const style =\n area !== 'sidebar'\n ? ({ '--sidebar-grid-area': area } as CSSProperties &\n Record<string, string>)\n : undefined;\n\n return (\n <div\n data-collapsed={isCollapsed ? 'true' : 'false'}\n data-open={isOpen}\n className={cx(\n classNames?.sidebar ?? sidebar(),\n classNames?.root ?? sidebarRoot(),\n 'group',\n )}\n style={style}\n >\n {topSlot ? (\n <div className={classNames?.topSlot ?? sidebarTopSlot()}>{topSlot}</div>\n ) : null}\n\n <nav className={classNames?.nav?.root ?? sidebarNavRoot()}>\n <ScrollAreaAutosize\n mah='100%'\n scrollbars='y'\n type='hover'\n classNames={{\n scrollArea:\n classNames?.nav?.scrollArea ?? sidebarScrollAreaAutosize(),\n }}\n >\n <NavList classNames={classNames}>{children}</NavList>\n </ScrollAreaAutosize>\n </nav>\n\n <div className={classNames?.bottomSlot ?? sidebarBottomSlot()}>\n {bottomSlot ? (\n bottomSlot\n ) : (\n <ButtonIcon\n path='/icons/sprite-mage.svg'\n name={isCollapsed ? 'mage-sidebar-expand' : 'mage-sidebar-collapse'}\n label={\n isCollapsed\n ? collapseButtonLabelExpand\n : collapseButtonLabelCollapse\n }\n classNames={{\n root: classNames?.collapseButton ?? buttonIconRoot(),\n }}\n onClick={toggleCollapsed}\n />\n )}\n </div>\n </div>\n );\n};\n\nexport const Sidebar = ({\n area = 'sidebar',\n classNames,\n isCollapsed,\n defaultCollapsed = false,\n onCollapsedChange,\n isOpen,\n expandedItems,\n topSlot,\n bottomSlot,\n collapseButtonLabelCollapse = 'Collapse',\n collapseButtonLabelExpand = 'Expand',\n children,\n}: SidebarProps): ReactNode => {\n return (\n <SidebarProvider\n isCollapsed={isCollapsed}\n defaultCollapsed={defaultCollapsed}\n onCollapsedChange={onCollapsedChange}\n expandedItems={expandedItems}\n >\n <SidebarContent\n area={area}\n classNames={classNames}\n isOpen={isOpen}\n topSlot={topSlot}\n bottomSlot={bottomSlot}\n collapseButtonLabelCollapse={collapseButtonLabelCollapse}\n collapseButtonLabelExpand={collapseButtonLabelExpand}\n >\n {children}\n </SidebarContent>\n </SidebarProvider>\n );\n};\n\nSidebar.displayName = 'Sidebar';\nSidebar.Item = NavItem;\nSidebar.Group = NavGroup;\nSidebar.ItemLink = NavItemLink;\nSidebar.SubNav = SubNavItem;\n"],"mappings":"4xBAgEA,MAAM,GAAkB,CACtB,OAAO,UACP,UACA,aACA,aACA,SACA,8BAA8B,WAC9B,4BAA4B,SAC5B,cACoC,CACpC,GAAM,CAAE,cAAa,mBAAoB,GAAmB,CACtD,EACJ,IAAS,UAGL,IAAA,GAFC,CAAE,sBAAuB,EAAM,CAItC,OACE,EAAC,MAAD,CACE,iBAAgB,EAAc,OAAS,QACvC,YAAW,EACX,UAAW,EACT,GAAY,SAAW,GAAS,CAChC,GAAY,MAAQ,GAAa,CACjC,QACD,CACM,iBART,CAUG,EACC,EAAC,MAAD,CAAK,UAAW,GAAY,SAAW,GAAgB,UAAG,EAAc,CAAA,CACtE,KAEJ,EAAC,MAAD,CAAK,UAAW,GAAY,KAAK,MAAQ,GAAgB,UACvD,EAAC,EAAD,CACE,IAAI,OACJ,WAAW,IACX,KAAK,QACL,WAAY,CACV,WACE,GAAY,KAAK,YAAc,GAA2B,CAC7D,UAED,EAAC,EAAD,CAAqB,aAAa,WAAmB,CAAA,CAClC,CAAA,CACjB,CAAA,CAEN,EAAC,MAAD,CAAK,UAAW,GAAY,YAAc,GAAmB,UAC1D,GAGC,EAAC,EAAD,CACE,KAAK,yBACL,KAAM,EAAc,sBAAwB,wBAC5C,MACE,EACI,EACA,EAEN,WAAY,CACV,KAAM,GAAY,gBAAkB,GAAgB,CACrD,CACD,QAAS,EACT,CAAA,CAEA,CAAA,CACF,IAIG,GAAW,CACtB,OAAO,UACP,aACA,cACA,mBAAmB,GACnB,oBACA,SACA,gBACA,UACA,aACA,8BAA8B,WAC9B,4BAA4B,SAC5B,cAGE,EAAC,EAAD,CACe,cACK,mBACC,oBACJ,yBAEf,EAAC,EAAD,CACQ,OACM,aACJ,SACC,UACG,aACiB,8BACF,4BAE1B,WACc,CAAA,CACD,CAAA,CAItB,EAAQ,YAAc,UACtB,EAAQ,KAAO,EACf,EAAQ,MAAQ,EAChB,EAAQ,SAAW,EACnB,EAAQ,OAAS"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.151",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.21.4",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/
|
|
29
|
-
"@mage-ui/
|
|
28
|
+
"@mage-ui/styled-system": "1.0.8",
|
|
29
|
+
"@mage-ui/preset": "1.0.151"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@dnd-kit/core": "^6.3.1",
|