@mich8060/unified-design-system 0.2.44 → 0.2.46
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/ai/manifest.json +1 -1
- package/dist/app-shell/AppShell.d.ts +10 -6
- package/dist/components/SearchInput/SearchInput.cjs +1 -1
- package/dist/components/SearchInput/SearchInput.js +1 -1
- package/dist/components/Toolbar/Toolbar.cjs +1 -1
- package/dist/components/Toolbar/Toolbar.js +1 -1
- package/dist/design-system/components/Toolbar/Toolbar.d.ts +1 -1
- package/dist/design-system/components/Toolbar/Toolbar.types.d.ts +1 -3
- package/dist/src/app-shell/AppShell.cjs +1 -1
- package/dist/src/app-shell/AppShell.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/ai/manifest.json
CHANGED
|
@@ -3244,7 +3244,7 @@
|
|
|
3244
3244
|
"name": "Toolbar",
|
|
3245
3245
|
"category": "layout",
|
|
3246
3246
|
"intent": "Top bar with edge actions and centered identity/title",
|
|
3247
|
-
"purpose": "Top action bar with
|
|
3247
|
+
"purpose": "Top action bar with three composable slots: left, center, and right.",
|
|
3248
3248
|
"tier": 2,
|
|
3249
3249
|
"description": "A horizontal application bar that reserves left and right action regions and a centered title or branding slot.",
|
|
3250
3250
|
"roles": [
|
|
@@ -45,12 +45,16 @@ export interface AppShellProps {
|
|
|
45
45
|
export interface AppShellSectionProps {
|
|
46
46
|
children?: React.ReactNode;
|
|
47
47
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
declare const
|
|
53
|
-
declare const
|
|
48
|
+
type AppShellSlotName = "Menu" | "Content" | "Listview" | "Main" | "SidePanel" | "Footer";
|
|
49
|
+
type AppShellSlotComponent = React.FC<AppShellSectionProps> & {
|
|
50
|
+
__appShellSlot?: AppShellSlotName;
|
|
51
|
+
};
|
|
52
|
+
declare const AppShellMenuSlot: AppShellSlotComponent;
|
|
53
|
+
declare const AppShellContentSlot: AppShellSlotComponent;
|
|
54
|
+
declare const AppShellListviewSlot: AppShellSlotComponent;
|
|
55
|
+
declare const AppShellMainSlot: AppShellSlotComponent;
|
|
56
|
+
declare const AppShellSidePanelSlot: AppShellSlotComponent;
|
|
57
|
+
declare const AppShellFooterSlot: AppShellSlotComponent;
|
|
54
58
|
type AppShellCompound = React.FC<AppShellProps> & {
|
|
55
59
|
Menu: typeof AppShellMenuSlot;
|
|
56
60
|
Content: typeof AppShellContentSlot;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),S=require("../Dropdown/Dropdown.cjs");;/* empty css */const j=require("../TextInput/TextInput.cjs"),l="uds-search-input";function y({dropdownOptions:e,dropdownValue:u,onDropdownChange:t,dropdownPlaceholder:i="All",dropdownDisabled:f=!1,dropdownPlacement:d="bottom-end",className:h="",disabled:a=!1,size:n="default",...r}){const s=!!(e&&e.length>0),m=[l,s&&`${l}--with-dropdown`,h].filter(Boolean).join(" "),p=s?c.jsx(S.default,{options:e,value:u,onChange:o=>{typeof o=="string"&&(t==null||t(o))},placeholder:i,size:n,placement:d,disabled:a||f,searchable:!1,menuFullWidth:!1,className:`${l}__dropdown-control`}):null;return c.jsx(j.default,{type:"search",icon:"MagnifyingGlass",iconPosition:"left",placeholder:r.placeholder??"Search",className:m,disabled:a,size:n,endAdornment:p,...r})}exports.SearchInput=y;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as c}from"react/jsx-runtime";import S from"../Dropdown/Dropdown.js";/* empty css */import A from"../TextInput/TextInput.js";const t="uds-search-input";function b({dropdownOptions:e,dropdownValue:i,onDropdownChange:l,dropdownPlaceholder:f="All",dropdownDisabled:m=!1,dropdownPlacement:p="bottom-end",className:u="",disabled:o=!1,size:a="default",...r}){const n=!!(e&&e.length>0),d=[t,n&&`${t}--with-dropdown`,u].filter(Boolean).join(" "),h=n?c(S,{options:e,value:i,onChange:s=>{typeof s=="string"&&(l==null||l(s))},placeholder:f,size:a,placement:p,disabled:o||m,searchable:!1,menuFullWidth:!1,className:`${t}__dropdown-control`}):null;return c(A,{type:"search",icon:"MagnifyingGlass",iconPosition:"left",placeholder:r.placeholder??"Search",className:d,disabled:o,size:a,endAdornment:h,...r})}export{b as SearchInput};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css */
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css */function i({left:o,center:r,right:s,className:l="",...a}){const t=["uds-toolbar",l].filter(Boolean).join(" ");return e.jsxs("div",{className:t,role:"toolbar",...a,children:[e.jsx("div",{className:"uds-toolbar__left",children:o}),e.jsx("div",{className:"uds-toolbar__center",children:r}),e.jsx("div",{className:"uds-toolbar__right",children:s})]})}exports.Toolbar=i;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as i,jsx as o}from"react/jsx-runtime";/* empty css */function n({left:r,center:l,right:s,className:a="",...e}){const t=["uds-toolbar",a].filter(Boolean).join(" ");return i("div",{className:t,role:"toolbar",...e,children:[o("div",{className:"uds-toolbar__left",children:r}),o("div",{className:"uds-toolbar__center",children:l}),o("div",{className:"uds-toolbar__right",children:s})]})}export{n as Toolbar};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import "./_toolbar.scss";
|
|
2
2
|
import type { ToolbarProps } from "./Toolbar.types";
|
|
3
|
-
export declare function Toolbar({ left,
|
|
3
|
+
export declare function Toolbar({ left, center, right, className, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react"),Z=require("./layout.types.cjs"),U=require("../../components/Avatar/Avatar.cjs"),ee=require("../../components/ActionMenu/ActionMenu.cjs"),ne=require("../../components/Button/Button.cjs"),le=require("../../components/Branding/Branding.cjs"),te=require("../../components/Toolbar/Toolbar.cjs");;/* empty css */const i=l=>{const t=({children:h})=>n.jsx(n.Fragment,{children:h});return t.__appShellSlot=l,t},A=l=>{if(l&&(typeof l=="function"||typeof l=="object"&&l!==null))return l.__appShellSlot},k=i("Menu"),w=i("Content"),N=i("Listview"),L=i("Main"),q=i("SidePanel"),$=i("Footer"),d=l=>o.Children.toArray(l).some(t=>typeof t=="string"?t.trim().length>0:t!=null&&t!==!1);function ae({layout:l,slots:t,children:h,standalone:F=!1,brand:m="default",theme:P="light",className:E="",skipToContent:O=!0,skipToContentLabel:I="Skip to content",mainContentId:B,mobileBrandLabel:R,mobileUserName:f="Jane Doe",mobileUserInitials:T="JD",mobileUserAvatarSrc:z,mobileAccountMenuItems:b=[]}){const r=o.useMemo(()=>({...Z.defaultLayout,...l}),[l]),D=o.useId().replace(/[:]/g,""),_=B??`app-shell-main-${D}`,[c,g]=o.useState(!1),J=R??(m==="default"?"design-system":m),G=o.useMemo(()=>Array.isArray(b)?b:[],[b]),p=o.useCallback(()=>g(!1),[]),H=o.useCallback(()=>g(e=>!e),[]);o.useEffect(()=>{if(!c)return;const e=a=>{a.key==="Escape"&&p()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[p,c]);const K=o.useCallback(e=>{const a=e.target;a&&a.closest("a")&&p()},[p]);let S=null,C=null,v=null,M=null,y=null,j=null;const Q=o.Children.toArray(h);for(const e of Q){const a=A(e.type);if(e.type===k||a==="Menu"){S=e.props.children;continue}if(e.type===w||a==="Content"){C=e.props.children;continue}(e.type===$||a==="Footer")&&(j=e.props.children)}const V=o.Children.toArray(C);for(const e of V){const a=A(e.type);if(e.type===N||a==="Listview"){v=e.props.children;continue}if(e.type===L||a==="Main"){M=e.props.children;continue}(e.type===q||a==="SidePanel")&&(y=e.props.children)}const x=(t==null?void 0:t.Footer)??j,u=!F&&r.sidebar&&d(S),W=d(v),X=d(y),Y=["app-shell",`brand-${m}`,`theme-${P}`,`density-${r.density}`,`container-${r.container}`,`padding-${r.padding}`,u?"app-shell--has-nav":"app-shell--standalone",c?"app-shell--mobile-menu-open":"",E].join(" ");return n.jsxs("div",{className:Y,children:[O?n.jsx("a",{className:"app-shell__skip-link",href:`#${_}`,children:I}):null,u?n.jsx("div",{className:"app-shell__mobile-toolbar-wrap",children:n.jsx(te.Toolbar,{className:"app-shell__mobile-toolbar",left:n.jsx(ne.default,{appearance:"text",icon:"List",label:c?"Close navigation menu":"Open navigation menu",layout:"icon-only","aria-label":c?"Close navigation menu":"Open navigation menu",onClick:H}),center:n.jsx(le.default,{brand:J,symbol:!0}),right:n.jsx(ee.default,{placement:"bottom-end",items:G,trigger:n.jsx("button",{type:"button",className:"app-shell__mobile-avatar-trigger","aria-label":`${f} account menu`,children:n.jsx(U.default,{src:z,initials:T,alt:f?`${f} avatar`:"User avatar",size:"default"})})})})}):null,n.jsxs("div",{className:"app-shell__body",children:[u?n.jsx("aside",{className:"app-shell__sidebar","aria-label":"Primary",onClickCapture:K,children:S}):null,n.jsxs("div",{className:"app-shell__main",children:[n.jsxs("main",{className:"app-shell__content",id:_,tabIndex:-1,children:[W?n.jsx("aside",{className:"app-shell__listview",children:v}):null,n.jsx("section",{className:"app-shell__main-content",children:M}),X?n.jsx("aside",{className:"app-shell__side-panel",children:y}):null]}),r.footer&&d(x)?x:null]})]}),u?n.jsx("button",{type:"button",className:"app-shell__mobile-backdrop",onClick:p,"aria-label":"Close navigation menu"}):null]})}const s=ae;s.Menu=k;s.Content=w;s.Listview=N;s.Main=L;s.SidePanel=q;s.Footer=$;exports.AppShell=s;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as d,jsx as n,Fragment as
|
|
1
|
+
import{jsxs as d,jsx as n,Fragment as ne}from"react/jsx-runtime";import y,{useMemo as L,useId as te,useState as le,useCallback as g,useEffect as oe}from"react";import{defaultLayout as ae}from"./layout.types.js";import ie from"../../components/Avatar/Avatar.js";import se from"../../components/ActionMenu/ActionMenu.js";import re from"../../components/Button/Button.js";import pe from"../../components/Branding/Branding.js";import{Toolbar as ce}from"../../components/Toolbar/Toolbar.js";/* empty css */const a=t=>{const l=({children:h})=>n(ne,{children:h});return l.__appShellSlot=t,l},$=t=>{if(t&&(typeof t=="function"||typeof t=="object"&&t!==null))return t.__appShellSlot},F=a("Menu"),P=a("Content"),x=a("Listview"),E=a("Main"),j=a("SidePanel"),I=a("Footer"),u=t=>y.Children.toArray(t).some(l=>typeof l=="string"?l.trim().length>0:l!=null&&l!==!1);function de({layout:t,slots:l,children:h,standalone:O=!1,brand:m="default",theme:B="light",className:z="",skipToContent:D=!0,skipToContentLabel:J="Skip to content",mainContentId:R,mobileBrandLabel:T,mobileUserName:f="Jane Doe",mobileUserInitials:q="JD",mobileUserAvatarSrc:G,mobileAccountMenuItems:S=[]}){const s=L(()=>({...ae,...t}),[t]),H=te().replace(/[:]/g,""),C=R??`app-shell-main-${H}`,[r,M]=le(!1),K=T??(m==="default"?"design-system":m),Q=L(()=>Array.isArray(S)?S:[],[S]),p=g(()=>M(!1),[]),V=g(()=>M(e=>!e),[]);oe(()=>{if(!r)return;const e=o=>{o.key==="Escape"&&p()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[p,r]);const W=g(e=>{const o=e.target;o&&o.closest("a")&&p()},[p]);let b=null,A=null,v=null,w=null,_=null,N=null;const X=y.Children.toArray(h);for(const e of X){const o=$(e.type);if(e.type===F||o==="Menu"){b=e.props.children;continue}if(e.type===P||o==="Content"){A=e.props.children;continue}(e.type===I||o==="Footer")&&(N=e.props.children)}const Y=y.Children.toArray(A);for(const e of Y){const o=$(e.type);if(e.type===x||o==="Listview"){v=e.props.children;continue}if(e.type===E||o==="Main"){w=e.props.children;continue}(e.type===j||o==="SidePanel")&&(_=e.props.children)}const k=(l==null?void 0:l.Footer)??N,c=!O&&s.sidebar&&u(b),Z=u(v),U=u(_),ee=["app-shell",`brand-${m}`,`theme-${B}`,`density-${s.density}`,`container-${s.container}`,`padding-${s.padding}`,c?"app-shell--has-nav":"app-shell--standalone",r?"app-shell--mobile-menu-open":"",z].join(" ");return d("div",{className:ee,children:[D?n("a",{className:"app-shell__skip-link",href:`#${C}`,children:J}):null,c?n("div",{className:"app-shell__mobile-toolbar-wrap",children:n(ce,{className:"app-shell__mobile-toolbar",left:n(re,{appearance:"text",icon:"List",label:r?"Close navigation menu":"Open navigation menu",layout:"icon-only","aria-label":r?"Close navigation menu":"Open navigation menu",onClick:V}),center:n(pe,{brand:K,symbol:!0}),right:n(se,{placement:"bottom-end",items:Q,trigger:n("button",{type:"button",className:"app-shell__mobile-avatar-trigger","aria-label":`${f} account menu`,children:n(ie,{src:G,initials:q,alt:f?`${f} avatar`:"User avatar",size:"default"})})})})}):null,d("div",{className:"app-shell__body",children:[c?n("aside",{className:"app-shell__sidebar","aria-label":"Primary",onClickCapture:W,children:b}):null,d("div",{className:"app-shell__main",children:[d("main",{className:"app-shell__content",id:C,tabIndex:-1,children:[Z?n("aside",{className:"app-shell__listview",children:v}):null,n("section",{className:"app-shell__main-content",children:w}),U?n("aside",{className:"app-shell__side-panel",children:_}):null]}),s.footer&&u(k)?k:null]})]}),c?n("button",{type:"button",className:"app-shell__mobile-backdrop",onClick:p,"aria-label":"Close navigation menu"}):null]})}const i=de;i.Menu=F;i.Content=P;i.Listview=x;i.Main=E;i.SidePanel=j;i.Footer=I;export{i as AppShell};
|