@dxos/react-ui 0.7.5-labs.5f04cf6 → 0.7.5-labs.e27f9b9
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/lib/browser/index.mjs +69 -70
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +70 -70
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +69 -70
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/Avatars/Avatar.d.ts +5 -9
- package/dist/types/src/components/Avatars/Avatar.d.ts.map +1 -1
- package/dist/types/src/components/Avatars/Avatar.stories.d.ts +1 -2
- package/dist/types/src/components/Avatars/Avatar.stories.d.ts.map +1 -1
- package/dist/types/src/components/Buttons/IconButton.d.ts +2 -0
- package/dist/types/src/components/Buttons/IconButton.d.ts.map +1 -1
- package/dist/types/src/components/Main/Main.d.ts +35 -22
- package/dist/types/src/components/Main/Main.d.ts.map +1 -1
- package/dist/types/src/components/Main/Main.stories.d.ts +1 -1
- package/dist/types/src/components/Menus/DropdownMenu.d.ts +2 -6
- package/dist/types/src/components/Menus/DropdownMenu.d.ts.map +1 -1
- package/dist/types/src/components/Tag/Tag.d.ts.map +1 -1
- package/dist/types/src/components/Tag/Tag.stories.d.ts +12 -5
- package/dist/types/src/components/Tag/Tag.stories.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +42 -42
- package/src/components/Avatars/Avatar.tsx +3 -6
- package/src/components/Buttons/IconButton.tsx +4 -3
- package/src/components/Input/Input.tsx +1 -1
- package/src/components/Main/Main.stories.tsx +1 -1
- package/src/components/Main/Main.tsx +78 -72
- package/src/components/Tag/Tag.stories.tsx +20 -31
- package/src/components/Tag/Tag.tsx +15 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../../../src/components/Main/Main.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAsB,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,KAAK,EAAE,EACZ,KAAK,qBAAqB,EAC1B,KAAK,QAAQ,EAEb,KAAK,iBAAiB,EACtB,KAAK,cAAc,
|
|
1
|
+
{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../../../src/components/Main/Main.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAsB,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,KAAK,EAAE,EACZ,KAAK,qBAAqB,EAC1B,KAAK,QAAQ,EAEb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAKnB,KAAK,aAAa,EAClB,KAAK,wBAAwB,EAC9B,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAQlD,KAAK,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC;AAExD,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,sBAAsB,EAAE,YAAY,CAAC;IACrC,yBAAyB,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC;IAC9E,yBAAyB,EAAE,YAAY,CAAC;IACxC,4BAA4B,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC;CAClF,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,gBAAgB,mBAAoB,wBAAwB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,YAAY,MAAM;;uBAE5F,aAAa,CAAC,cAAc,CAAC;;;CAkBxC,CAAC;AAEF,QAAA,MAAqB,cAAc,4CAYjC,CAAC;AAEH,QAAA,MAAM,WAAW;;;;;;;;;;;;;CAuBhB,CAAC;AAEF,KAAK,aAAa,GAAG,iBAAiB,CAAC;IACrC,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC,6BAA6B,CAAC,EAAE,YAAY,CAAC;IAC7C,8BAA8B,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,KAAK,IAAI,CAAC;IACnE,yBAAyB,CAAC,EAAE,YAAY,CAAC;IACzC,gCAAgC,CAAC,EAAE,YAAY,CAAC;IAChD,iCAAiC,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,KAAK,IAAI,CAAC;CACvE,CAAC,CAAC;AAqEH,KAAK,gBAAgB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,aAAa,CAAC,CAAC,GAAG;IACrF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD,IAAI,EAAE,cAAc,GAAG,YAAY,CAAC;CACrC,CAAC;AA4CF,KAAK,0BAA0B,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAoB9E,KAAK,6BAA6B,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAqBjF,KAAK,SAAS,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AA4BF,KAAK,gBAAgB,GAAG,eAAe,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;AA2BvG,eAAO,MAAM,IAAI;;qRA9Md,aAAa;;;;;;;CAoNf,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC;AAEzD,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -4,7 +4,7 @@ type StoryMainArgs = {};
|
|
|
4
4
|
declare const _default: {
|
|
5
5
|
title: string;
|
|
6
6
|
component: {
|
|
7
|
-
({
|
|
7
|
+
({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }: import("./Main").MainRootProps): React.JSX.Element;
|
|
8
8
|
displayName: string;
|
|
9
9
|
};
|
|
10
10
|
render: (_args: StoryMainArgs) => React.JSX.Element;
|
|
@@ -104,12 +104,8 @@ export declare const DropdownMenu: {
|
|
|
104
104
|
SubTrigger: React.ForwardRefExoticComponent<DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
|
|
105
105
|
SubContent: React.ForwardRefExoticComponent<DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
106
106
|
};
|
|
107
|
-
declare const useDropdownMenuMenuScope: (scope: {
|
|
108
|
-
[
|
|
109
|
-
} | undefined) => {
|
|
110
|
-
[__scopeProp: string]: {
|
|
111
|
-
[scopeName: string]: React.Context<any>[];
|
|
112
|
-
} | undefined;
|
|
107
|
+
declare const useDropdownMenuMenuScope: (scope: Scope) => {
|
|
108
|
+
[__scopeProp: string]: Scope;
|
|
113
109
|
};
|
|
114
110
|
export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope };
|
|
115
111
|
export type { DropdownMenuRootProps, DropdownMenuTriggerProps, DropdownMenuVirtualTriggerProps, DropdownMenuPortalProps, DropdownMenuContentProps, DropdownMenuViewportProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuItemIndicatorProps, DropdownMenuSeparatorProps, DropdownMenuArrowProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menus/DropdownMenu.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAGd,KAAK,UAAU,EAEf,KAAK,wBAAwB,EAE7B,KAAK,qBAAqB,EAE1B,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;AAQ/B,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,mBAAmB,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC1D,QAAA,MAAkC,uBAAuB,+CAA6D,CAAC;AAGvH,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,gBAAgB,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,YAAY,IAAI,IAAI,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,QAAA,MAA6B,sBAAsB,wGACsB,CAAC;AAE1E,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAsCD,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,oBAAoB,GAAG,wBAAwB,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;AAC9E,UAAU,wBAAyB,SAAQ,oBAAoB;CAAG;AA8DlE,UAAU,+BAA+B;IACvC,UAAU,EAAE,SAAS,CAAC,0BAA0B,CAAC,CAAC;CACnD;AAsBD,KAAK,eAAe,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;AAC7E,UAAU,uBAAwB,SAAQ,eAAe;CAAG;AAc5D,KAAK,yBAAyB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAqBF,KAAK,gBAAgB,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;AAChG,UAAU,wBAAyB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC;CAAG;AA6DpF,KAAK,cAAc,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC;AAC3E,UAAU,sBAAuB,SAAQ,cAAc;CAAG;AAmB1D,KAAK,cAAc,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5F,UAAU,sBAAuB,SAAQ,cAAc;CAAG;AA2B1D,KAAK,aAAa,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1F,UAAU,qBAAsB,SAAQ,aAAa;CAAG;AA2BxD,KAAK,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;AAC1G,UAAU,6BAA8B,SAAQ,qBAAqB;CAAG;AA2BxE,KAAK,mBAAmB,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,CAAC;AACrF,UAAU,2BAA4B,SAAQ,mBAAmB;CAAG;AAmBpE,KAAK,kBAAkB,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,CAAC;AACnF,UAAU,0BAA2B,SAAQ,kBAAkB;CAAG;AAmBlE,KAAK,sBAAsB,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,aAAa,CAAC,CAAC;AAC3F,UAAU,8BAA+B,SAAQ,sBAAsB;CAAG;AAmB1E,KAAK,kBAAkB,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;AACpG,UAAU,0BAA2B,SAAQ,kBAAkB;CAAG;AA2BlE,KAAK,cAAc,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5F,UAAU,sBAAuB,SAAQ,cAAc;CAAG;AAwB1D,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;CACpC;AAyBD,KAAK,mBAAmB,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,CAAC;AACrF,UAAU,2BAA4B,SAAQ,mBAAmB;CAAG;AAmBpE,KAAK,mBAAmB,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,CAAC;AACrF,UAAU,2BAA4B,SAAQ,mBAAmB;CAAG;AAgCpE,eAAO,MAAM,YAAY;;;;gBApakB,WAAW,CAAC,+BAA+B,CAAC;;;;;;;;;;;;;;;;;;CAubtF,CAAC;AAEF,QAAA,MAAM,wBAAwB
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menus/DropdownMenu.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAGd,KAAK,UAAU,EAEf,KAAK,wBAAwB,EAE7B,KAAK,qBAAqB,EAE1B,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,KAAK,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;AAQ/B,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,mBAAmB,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC1D,QAAA,MAAkC,uBAAuB,+CAA6D,CAAC;AAGvH,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,gBAAgB,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,YAAY,IAAI,IAAI,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,QAAA,MAA6B,sBAAsB,wGACsB,CAAC;AAE1E,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAsCD,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,oBAAoB,GAAG,wBAAwB,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;AAC9E,UAAU,wBAAyB,SAAQ,oBAAoB;CAAG;AA8DlE,UAAU,+BAA+B;IACvC,UAAU,EAAE,SAAS,CAAC,0BAA0B,CAAC,CAAC;CACnD;AAsBD,KAAK,eAAe,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;AAC7E,UAAU,uBAAwB,SAAQ,eAAe;CAAG;AAc5D,KAAK,yBAAyB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAqBF,KAAK,gBAAgB,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;AAChG,UAAU,wBAAyB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC;CAAG;AA6DpF,KAAK,cAAc,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC;AAC3E,UAAU,sBAAuB,SAAQ,cAAc;CAAG;AAmB1D,KAAK,cAAc,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5F,UAAU,sBAAuB,SAAQ,cAAc;CAAG;AA2B1D,KAAK,aAAa,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1F,UAAU,qBAAsB,SAAQ,aAAa;CAAG;AA2BxD,KAAK,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;AAC1G,UAAU,6BAA8B,SAAQ,qBAAqB;CAAG;AA2BxE,KAAK,mBAAmB,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,CAAC;AACrF,UAAU,2BAA4B,SAAQ,mBAAmB;CAAG;AAmBpE,KAAK,kBAAkB,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,CAAC;AACnF,UAAU,0BAA2B,SAAQ,kBAAkB;CAAG;AAmBlE,KAAK,sBAAsB,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,aAAa,CAAC,CAAC;AAC3F,UAAU,8BAA+B,SAAQ,sBAAsB;CAAG;AAmB1E,KAAK,kBAAkB,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;AACpG,UAAU,0BAA2B,SAAQ,kBAAkB;CAAG;AA2BlE,KAAK,cAAc,GAAG,eAAe,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5F,UAAU,sBAAuB,SAAQ,cAAc;CAAG;AAwB1D,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;CACpC;AAyBD,KAAK,mBAAmB,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,CAAC;AACrF,UAAU,2BAA4B,SAAQ,mBAAmB;CAAG;AAmBpE,KAAK,mBAAmB,GAAG,wBAAwB,CAAC,OAAO,aAAa,CAAC,UAAU,CAAC,CAAC;AACrF,UAAU,2BAA4B,SAAQ,mBAAmB;CAAG;AAgCpE,eAAO,MAAM,YAAY;;;;gBApakB,WAAW,CAAC,+BAA+B,CAAC;;;;;;;;;;;;;;;;;;CAubtF,CAAC;AAEF,QAAA,MAAM,wBAAwB;;CAAe,CAAC;AAE9C,OAAO,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,CAAC;AAErF,YAAY,EACV,qBAAqB,EACrB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,6BAA6B,EAC7B,2BAA2B,EAC3B,0BAA0B,EAC1B,8BAA8B,EAC9B,0BAA0B,EAC1B,sBAAsB,EACtB,oBAAoB,EACpB,2BAA2B,EAC3B,2BAA2B,GAC5B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGvG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG;IACrF,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,GAAG,cAAc,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,GAAG,+
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGvG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG;IACrF,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,GAAG,cAAc,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,GAAG,+FAaf,CAAC"}
|
|
@@ -1,10 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import '@dxos-theme';
|
|
2
|
-
declare const _default:
|
|
3
|
+
declare const _default: {
|
|
4
|
+
readonly title: "ui/react-ui-core/Tag";
|
|
5
|
+
readonly component: React.ForwardRefExoticComponent<Omit<import("./Tag").TagProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
6
|
+
readonly decorators: readonly [import("@storybook/react/*").Decorator];
|
|
7
|
+
readonly parameters: {
|
|
8
|
+
readonly chromatic: {
|
|
9
|
+
readonly disableSnapshot: false;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
3
13
|
export default _default;
|
|
4
14
|
export declare const Default: {
|
|
5
|
-
|
|
6
|
-
children: string;
|
|
7
|
-
palette: string;
|
|
8
|
-
};
|
|
15
|
+
render: () => React.JSX.Element;
|
|
9
16
|
};
|
|
10
17
|
//# sourceMappingURL=Tag.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,aAAa,CAAC;;;;;;;;;;;AAWrB,wBAKW;AAEX,eAAO,MAAM,OAAO;;CAUnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.7.
|
|
1
|
+
{"version":"5.7.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui",
|
|
3
|
-
"version": "0.7.5-labs.
|
|
3
|
+
"version": "0.7.5-labs.e27f9b9",
|
|
4
4
|
"description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -24,49 +24,49 @@
|
|
|
24
24
|
],
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
|
|
27
|
-
"@fluentui/react-tabster": "
|
|
28
|
-
"@radix-ui/primitive": "
|
|
29
|
-
"@radix-ui/react-alert-dialog": "
|
|
30
|
-
"@radix-ui/react-avatar": "
|
|
31
|
-
"@radix-ui/react-checkbox": "
|
|
32
|
-
"@radix-ui/react-collapsible": "
|
|
33
|
-
"@radix-ui/react-compose-refs": "
|
|
34
|
-
"@radix-ui/react-context": "
|
|
35
|
-
"@radix-ui/react-context-menu": "
|
|
36
|
-
"@radix-ui/react-dialog": "
|
|
37
|
-
"@radix-ui/react-dismissable-layer": "
|
|
38
|
-
"@radix-ui/react-focus-guards": "
|
|
39
|
-
"@radix-ui/react-focus-scope": "
|
|
40
|
-
"@radix-ui/react-id": "
|
|
41
|
-
"@radix-ui/react-menu": "
|
|
42
|
-
"@radix-ui/react-popper": "
|
|
43
|
-
"@radix-ui/react-portal": "
|
|
44
|
-
"@radix-ui/react-presence": "
|
|
45
|
-
"@radix-ui/react-primitive": "
|
|
46
|
-
"@radix-ui/react-scroll-area": "
|
|
47
|
-
"@radix-ui/react-select": "
|
|
48
|
-
"@radix-ui/react-separator": "
|
|
49
|
-
"@radix-ui/react-slot": "
|
|
50
|
-
"@radix-ui/react-switch": "
|
|
51
|
-
"@radix-ui/react-toast": "
|
|
52
|
-
"@radix-ui/react-toggle": "
|
|
53
|
-
"@radix-ui/react-toggle-group": "
|
|
54
|
-
"@radix-ui/react-toolbar": "
|
|
55
|
-
"@radix-ui/react-tooltip": "
|
|
56
|
-
"@radix-ui/react-use-controllable-state": "
|
|
27
|
+
"@fluentui/react-tabster": "9.23.3",
|
|
28
|
+
"@radix-ui/primitive": "1.1.1",
|
|
29
|
+
"@radix-ui/react-alert-dialog": "1.1.6",
|
|
30
|
+
"@radix-ui/react-avatar": "1.1.3",
|
|
31
|
+
"@radix-ui/react-checkbox": "1.1.4",
|
|
32
|
+
"@radix-ui/react-collapsible": "1.1.3",
|
|
33
|
+
"@radix-ui/react-compose-refs": "1.1.1",
|
|
34
|
+
"@radix-ui/react-context": "1.1.1",
|
|
35
|
+
"@radix-ui/react-context-menu": "2.2.6",
|
|
36
|
+
"@radix-ui/react-dialog": "1.1.6",
|
|
37
|
+
"@radix-ui/react-dismissable-layer": "1.1.5",
|
|
38
|
+
"@radix-ui/react-focus-guards": "1.1.1",
|
|
39
|
+
"@radix-ui/react-focus-scope": "1.1.2",
|
|
40
|
+
"@radix-ui/react-id": "1.1.0",
|
|
41
|
+
"@radix-ui/react-menu": "2.1.6",
|
|
42
|
+
"@radix-ui/react-popper": "1.2.2",
|
|
43
|
+
"@radix-ui/react-portal": "1.1.4",
|
|
44
|
+
"@radix-ui/react-presence": "1.1.2",
|
|
45
|
+
"@radix-ui/react-primitive": "2.0.2",
|
|
46
|
+
"@radix-ui/react-scroll-area": "1.2.3",
|
|
47
|
+
"@radix-ui/react-select": "2.1.6",
|
|
48
|
+
"@radix-ui/react-separator": "1.1.2",
|
|
49
|
+
"@radix-ui/react-slot": "1.1.2",
|
|
50
|
+
"@radix-ui/react-switch": "1.1.3",
|
|
51
|
+
"@radix-ui/react-toast": "1.2.6",
|
|
52
|
+
"@radix-ui/react-toggle": "1.1.2",
|
|
53
|
+
"@radix-ui/react-toggle-group": "1.1.2",
|
|
54
|
+
"@radix-ui/react-toolbar": "1.1.2",
|
|
55
|
+
"@radix-ui/react-tooltip": "1.1.8",
|
|
56
|
+
"@radix-ui/react-use-controllable-state": "1.1.0",
|
|
57
57
|
"aria-hidden": "^1.2.4",
|
|
58
58
|
"date-fns": "^3.3.1",
|
|
59
59
|
"i18next": "^21.10.0",
|
|
60
60
|
"keyborg": "^2.5.0",
|
|
61
61
|
"react-i18next": "^11.18.6",
|
|
62
62
|
"react-remove-scroll": "^2.6.0",
|
|
63
|
-
"@dxos/debug": "0.7.5-labs.
|
|
64
|
-
"@dxos/
|
|
65
|
-
"@dxos/react-
|
|
66
|
-
"@dxos/
|
|
67
|
-
"@dxos/react-
|
|
68
|
-
"@dxos/
|
|
69
|
-
"@dxos/
|
|
63
|
+
"@dxos/debug": "0.7.5-labs.e27f9b9",
|
|
64
|
+
"@dxos/log": "0.7.5-labs.e27f9b9",
|
|
65
|
+
"@dxos/react-hooks": "0.7.5-labs.e27f9b9",
|
|
66
|
+
"@dxos/react-input": "0.7.5-labs.e27f9b9",
|
|
67
|
+
"@dxos/react-ui-types": "0.7.5-labs.e27f9b9",
|
|
68
|
+
"@dxos/react-list": "0.7.5-labs.e27f9b9",
|
|
69
|
+
"@dxos/util": "0.7.5-labs.e27f9b9"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
72
|
"@dnd-kit/core": "^6.0.5",
|
|
@@ -78,15 +78,15 @@
|
|
|
78
78
|
"react": "~18.2.0",
|
|
79
79
|
"react-dom": "~18.2.0",
|
|
80
80
|
"vite": "5.4.7",
|
|
81
|
-
"@dxos/random": "0.7.5-labs.
|
|
82
|
-
"@dxos/react-ui-theme": "0.7.5-labs.
|
|
83
|
-
"@dxos/util": "0.7.5-labs.
|
|
81
|
+
"@dxos/random": "0.7.5-labs.e27f9b9",
|
|
82
|
+
"@dxos/react-ui-theme": "0.7.5-labs.e27f9b9",
|
|
83
|
+
"@dxos/util": "0.7.5-labs.e27f9b9"
|
|
84
84
|
},
|
|
85
85
|
"peerDependencies": {
|
|
86
86
|
"@phosphor-icons/react": "^2.1.5",
|
|
87
87
|
"react": "~18.2.0",
|
|
88
88
|
"react-dom": "~18.2.0",
|
|
89
|
-
"@dxos/react-ui-theme": "0.7.5-labs.
|
|
89
|
+
"@dxos/react-ui-theme": "0.7.5-labs.e27f9b9"
|
|
90
90
|
},
|
|
91
91
|
"publishConfig": {
|
|
92
92
|
"access": "public"
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
import {
|
|
6
6
|
Root as AvatarRootPrimitive,
|
|
7
7
|
type AvatarProps as AvatarRootPrimitiveProps,
|
|
8
|
-
type ImageLoadingStatus,
|
|
9
8
|
Fallback as AvatarFallbackPrimitive,
|
|
9
|
+
type AvatarImageProps as AvatarImagePrimitiveProps,
|
|
10
10
|
} from '@radix-ui/react-avatar';
|
|
11
11
|
import { createContext } from '@radix-ui/react-context';
|
|
12
12
|
import { Primitive } from '@radix-ui/react-primitive';
|
|
@@ -243,9 +243,7 @@ const AvatarMaskedText = (props: AvatarMaskedTextProps) => {
|
|
|
243
243
|
);
|
|
244
244
|
};
|
|
245
245
|
|
|
246
|
-
type AvatarImageProps = ComponentPropsWithRef<'image'> &
|
|
247
|
-
onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
|
|
248
|
-
};
|
|
246
|
+
type AvatarImageProps = ComponentPropsWithRef<'image'> & Pick<AvatarImagePrimitiveProps, 'onLoadingStatusChange'>;
|
|
249
247
|
|
|
250
248
|
const AvatarImage = forwardRef<SVGImageElement, AvatarImageProps>(
|
|
251
249
|
({ onLoadingStatusChange, ...props }, forwardedRef) => {
|
|
@@ -264,8 +262,7 @@ const AvatarImage = forwardRef<SVGImageElement, AvatarImageProps>(
|
|
|
264
262
|
|
|
265
263
|
type AvatarIconProps = {
|
|
266
264
|
icon: string;
|
|
267
|
-
|
|
268
|
-
};
|
|
265
|
+
} & Pick<AvatarImagePrimitiveProps, 'onLoadingStatusChange'>;
|
|
269
266
|
|
|
270
267
|
const AvatarIcon = forwardRef<SVGSVGElement, AvatarIconProps>(({ onLoadingStatusChange, ...props }, forwardedRef) => {
|
|
271
268
|
const { size } = useAvatarContext('AvatarIcon');
|
|
@@ -8,7 +8,7 @@ import { Button, type ButtonProps } from './Button';
|
|
|
8
8
|
import { useThemeContext } from '../../hooks';
|
|
9
9
|
import { type ThemedClassName } from '../../util';
|
|
10
10
|
import { Icon, type IconProps } from '../Icon';
|
|
11
|
-
import { Tooltip } from '../Tooltip';
|
|
11
|
+
import { Tooltip, type TooltipContentProps } from '../Tooltip';
|
|
12
12
|
|
|
13
13
|
type IconButtonProps = Omit<ButtonProps, 'children'> &
|
|
14
14
|
Pick<IconProps, 'icon' | 'size'> & {
|
|
@@ -19,14 +19,15 @@ type IconButtonProps = Omit<ButtonProps, 'children'> &
|
|
|
19
19
|
iconClassNames?: ThemedClassName<any>['classNames'];
|
|
20
20
|
tooltipPortal?: boolean;
|
|
21
21
|
tooltipZIndex?: string;
|
|
22
|
+
tooltipSide?: TooltipContentProps['side'];
|
|
22
23
|
suppressNextTooltip?: MutableRefObject<boolean>;
|
|
23
24
|
};
|
|
24
25
|
|
|
25
26
|
const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
|
|
26
|
-
({ tooltipPortal = true, tooltipZIndex: zIndex, suppressNextTooltip, ...props }, forwardedRef) => {
|
|
27
|
+
({ tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
|
|
27
28
|
const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
|
|
28
29
|
const content = (
|
|
29
|
-
<Tooltip.Content {...(zIndex && { style: { zIndex } })}>
|
|
30
|
+
<Tooltip.Content {...(zIndex && { style: { zIndex } })} side={tooltipSide}>
|
|
30
31
|
{props.label}
|
|
31
32
|
<Tooltip.Arrow />
|
|
32
33
|
</Tooltip.Content>
|
|
@@ -307,7 +307,7 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
|
|
|
307
307
|
return (
|
|
308
308
|
<input
|
|
309
309
|
type='checkbox'
|
|
310
|
-
className='
|
|
310
|
+
className='dx-checkbox--switch dx-focus-ring'
|
|
311
311
|
checked={checked}
|
|
312
312
|
onChange={(event) => {
|
|
313
313
|
onCheckedChange(event.target.checked);
|
|
@@ -24,7 +24,7 @@ const ComplementarySidebarToggle = () => {
|
|
|
24
24
|
|
|
25
25
|
const StoryMain = (_args: StoryMainArgs) => {
|
|
26
26
|
return (
|
|
27
|
-
<Main.Root
|
|
27
|
+
<Main.Root>
|
|
28
28
|
<Main.Overlay />
|
|
29
29
|
<Main.NavigationSidebar classNames='p-4'>
|
|
30
30
|
<p>Navigation sidebar content, hi!</p>
|
|
@@ -35,12 +35,14 @@ const COMPLEMENTARY_SIDEBAR_NAME = 'ComplementarySidebar';
|
|
|
35
35
|
const MAIN_NAME = 'Main';
|
|
36
36
|
const GENERIC_CONSUMER_NAME = 'GenericConsumer';
|
|
37
37
|
|
|
38
|
+
type SidebarState = 'expanded' | 'collapsed' | 'closed';
|
|
39
|
+
|
|
38
40
|
type MainContextValue = {
|
|
39
41
|
resizing: boolean;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
navigationSidebarState: SidebarState;
|
|
43
|
+
setNavigationSidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
|
|
44
|
+
complementarySidebarState: SidebarState;
|
|
45
|
+
setComplementarySidebarState: Dispatch<SetStateAction<SidebarState | undefined>>;
|
|
44
46
|
};
|
|
45
47
|
|
|
46
48
|
const landmarkAttr = 'data-main-landmark';
|
|
@@ -73,73 +75,77 @@ const useLandmarkMover = (propsOnKeyDown: ComponentPropsWithoutRef<'div'>['onKey
|
|
|
73
75
|
|
|
74
76
|
const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
|
|
75
77
|
resizing: false,
|
|
76
|
-
|
|
77
|
-
|
|
78
|
+
navigationSidebarState: 'closed',
|
|
79
|
+
setNavigationSidebarState: (nextState) => {
|
|
78
80
|
// TODO(burdon): Standardize with other context missing errors using raise.
|
|
79
81
|
log.warn('Attempt to set sidebar state without initializing `MainRoot`');
|
|
80
82
|
},
|
|
81
|
-
|
|
82
|
-
|
|
83
|
+
complementarySidebarState: 'closed',
|
|
84
|
+
setComplementarySidebarState: (nextState) => {
|
|
83
85
|
// TODO(burdon): Standardize with other context missing errors using raise.
|
|
84
86
|
log.warn('Attempt to set sidebar state without initializing `MainRoot`');
|
|
85
87
|
},
|
|
86
88
|
});
|
|
87
89
|
|
|
88
90
|
const useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
|
|
89
|
-
const {
|
|
91
|
+
const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } =
|
|
90
92
|
useMainContext(consumerName);
|
|
91
93
|
return {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
+
navigationSidebarState,
|
|
95
|
+
setNavigationSidebarState,
|
|
94
96
|
toggleNavigationSidebar: useCallback(
|
|
95
|
-
() =>
|
|
96
|
-
[
|
|
97
|
+
() => setNavigationSidebarState(navigationSidebarState === 'expanded' ? 'closed' : 'expanded'),
|
|
98
|
+
[navigationSidebarState, setNavigationSidebarState],
|
|
97
99
|
),
|
|
98
|
-
openNavigationSidebar: useCallback(() =>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
100
|
+
openNavigationSidebar: useCallback(() => setNavigationSidebarState('expanded'), []),
|
|
101
|
+
collapseNavigationSidebar: useCallback(() => setNavigationSidebarState('collapsed'), []),
|
|
102
|
+
closeNavigationSidebar: useCallback(() => setNavigationSidebarState('closed'), []),
|
|
103
|
+
complementarySidebarState,
|
|
104
|
+
setComplementarySidebarState,
|
|
102
105
|
toggleComplementarySidebar: useCallback(
|
|
103
|
-
() =>
|
|
104
|
-
[
|
|
106
|
+
() => setComplementarySidebarState(complementarySidebarState === 'expanded' ? 'closed' : 'expanded'),
|
|
107
|
+
[complementarySidebarState, setComplementarySidebarState],
|
|
105
108
|
),
|
|
106
|
-
openComplementarySidebar: useCallback(() =>
|
|
107
|
-
|
|
109
|
+
openComplementarySidebar: useCallback(() => setComplementarySidebarState('expanded'), []),
|
|
110
|
+
collapseComplementarySidebar: useCallback(() => setComplementarySidebarState('collapsed'), []),
|
|
111
|
+
closeComplementarySidebar: useCallback(() => setComplementarySidebarState('closed'), []),
|
|
108
112
|
};
|
|
109
113
|
};
|
|
110
114
|
|
|
111
115
|
type MainRootProps = PropsWithChildren<{
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
116
|
+
navigationSidebarState?: SidebarState;
|
|
117
|
+
defaultNavigationSidebarState?: SidebarState;
|
|
118
|
+
onNavigationSidebarStateChange?: (nextState: SidebarState) => void;
|
|
119
|
+
complementarySidebarState?: SidebarState;
|
|
120
|
+
defaultComplementarySidebarState?: SidebarState;
|
|
121
|
+
onComplementarySidebarStateChange?: (nextState: SidebarState) => void;
|
|
118
122
|
}>;
|
|
119
123
|
|
|
120
124
|
const resizeDebounce = 3000;
|
|
121
125
|
|
|
122
126
|
const MainRoot = ({
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
navigationSidebarState: propsNavigationSidebarState,
|
|
128
|
+
defaultNavigationSidebarState,
|
|
129
|
+
onNavigationSidebarStateChange,
|
|
130
|
+
complementarySidebarState: propsComplementarySidebarState,
|
|
131
|
+
defaultComplementarySidebarState,
|
|
132
|
+
onComplementarySidebarStateChange,
|
|
129
133
|
children,
|
|
130
134
|
...props
|
|
131
135
|
}: MainRootProps) => {
|
|
132
136
|
const [isLg] = useMediaQuery('lg', { ssr: false });
|
|
133
|
-
const [
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
137
|
+
const [navigationSidebarState = isLg ? 'expanded' : 'collapsed', setNavigationSidebarState] =
|
|
138
|
+
useControllableState<SidebarState>({
|
|
139
|
+
prop: propsNavigationSidebarState,
|
|
140
|
+
defaultProp: defaultNavigationSidebarState,
|
|
141
|
+
onChange: onNavigationSidebarStateChange,
|
|
142
|
+
});
|
|
143
|
+
const [complementarySidebarState = isLg ? 'expanded' : 'collapsed', setComplementarySidebarState] =
|
|
144
|
+
useControllableState<SidebarState>({
|
|
145
|
+
prop: propsComplementarySidebarState,
|
|
146
|
+
defaultProp: defaultComplementarySidebarState,
|
|
147
|
+
onChange: onComplementarySidebarStateChange,
|
|
148
|
+
});
|
|
143
149
|
|
|
144
150
|
const [resizing, setResizing] = useState(false);
|
|
145
151
|
const resizeInterval = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
@@ -164,10 +170,10 @@ const MainRoot = ({
|
|
|
164
170
|
<MainProvider
|
|
165
171
|
{...props}
|
|
166
172
|
{...{
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
173
|
+
navigationSidebarState,
|
|
174
|
+
setNavigationSidebarState,
|
|
175
|
+
complementarySidebarState,
|
|
176
|
+
setComplementarySidebarState,
|
|
171
177
|
}}
|
|
172
178
|
resizing={resizing}
|
|
173
179
|
>
|
|
@@ -184,15 +190,15 @@ const handleOpenAutoFocus = (event: Event) => {
|
|
|
184
190
|
|
|
185
191
|
type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContent>> & {
|
|
186
192
|
swipeToDismiss?: boolean;
|
|
187
|
-
|
|
193
|
+
state?: SidebarState;
|
|
188
194
|
resizing?: boolean;
|
|
189
|
-
|
|
195
|
+
onStateChange?: (nextState: SidebarState) => void;
|
|
190
196
|
side: 'inline-start' | 'inline-end';
|
|
191
197
|
};
|
|
192
198
|
|
|
193
199
|
const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
|
|
194
200
|
(
|
|
195
|
-
{ classNames, children, swipeToDismiss, onOpenAutoFocus,
|
|
201
|
+
{ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, ...props },
|
|
196
202
|
forwardedRef,
|
|
197
203
|
) => {
|
|
198
204
|
const [isLg] = useMediaQuery('lg', { ssr: false });
|
|
@@ -200,7 +206,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
|
|
|
200
206
|
const ref = useForwardedRef(forwardedRef);
|
|
201
207
|
const noopRef = useRef(null);
|
|
202
208
|
useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
|
|
203
|
-
onDismiss: () =>
|
|
209
|
+
onDismiss: () => onStateChange?.('closed'),
|
|
204
210
|
});
|
|
205
211
|
const handleKeyDown = useCallback(
|
|
206
212
|
(event: KeyboardEvent<HTMLDivElement>) => {
|
|
@@ -213,16 +219,16 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
|
|
|
213
219
|
);
|
|
214
220
|
const Root = isLg ? Primitive.div : DialogContent;
|
|
215
221
|
return (
|
|
216
|
-
<DialogRoot open={
|
|
222
|
+
<DialogRoot open={state !== 'closed'} modal={false}>
|
|
217
223
|
<Root
|
|
218
224
|
{...(!isLg && { forceMount: true, tabIndex: -1, onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus })}
|
|
219
225
|
{...props}
|
|
220
226
|
data-side={side === 'inline-end' ? 'ie' : 'is'}
|
|
221
|
-
data-state={
|
|
227
|
+
data-state={state}
|
|
222
228
|
data-resizing={resizing ? 'true' : 'false'}
|
|
223
229
|
className={tx('main.sidebar', 'main__sidebar', {}, classNames)}
|
|
224
230
|
onKeyDown={handleKeyDown}
|
|
225
|
-
{...(
|
|
231
|
+
{...(state === 'closed' && { inert: 'true' })}
|
|
226
232
|
ref={ref}
|
|
227
233
|
>
|
|
228
234
|
{children}
|
|
@@ -232,17 +238,17 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
|
|
|
232
238
|
},
|
|
233
239
|
);
|
|
234
240
|
|
|
235
|
-
type MainNavigationSidebarProps = Omit<MainSidebarProps, '
|
|
241
|
+
type MainNavigationSidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
|
|
236
242
|
|
|
237
243
|
const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarProps>((props, forwardedRef) => {
|
|
238
|
-
const {
|
|
244
|
+
const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
|
|
239
245
|
const mover = useLandmarkMover(props.onKeyDown, '0');
|
|
240
246
|
return (
|
|
241
247
|
<MainSidebar
|
|
242
248
|
{...mover}
|
|
243
249
|
{...props}
|
|
244
|
-
|
|
245
|
-
|
|
250
|
+
state={navigationSidebarState}
|
|
251
|
+
onStateChange={setNavigationSidebarState}
|
|
246
252
|
resizing={resizing}
|
|
247
253
|
side='inline-start'
|
|
248
254
|
ref={forwardedRef}
|
|
@@ -252,18 +258,18 @@ const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarPr
|
|
|
252
258
|
|
|
253
259
|
MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
|
|
254
260
|
|
|
255
|
-
type MainComplementarySidebarProps = Omit<MainSidebarProps, '
|
|
261
|
+
type MainComplementarySidebarProps = Omit<MainSidebarProps, 'expanded' | 'side'>;
|
|
256
262
|
|
|
257
263
|
const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySidebarProps>((props, forwardedRef) => {
|
|
258
|
-
const {
|
|
264
|
+
const { complementarySidebarState, setComplementarySidebarState, resizing } =
|
|
259
265
|
useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
|
|
260
266
|
const mover = useLandmarkMover(props.onKeyDown, '2');
|
|
261
267
|
return (
|
|
262
268
|
<MainSidebar
|
|
263
269
|
{...mover}
|
|
264
270
|
{...props}
|
|
265
|
-
|
|
266
|
-
|
|
271
|
+
state={complementarySidebarState}
|
|
272
|
+
onStateChange={setComplementarySidebarState}
|
|
267
273
|
resizing={resizing}
|
|
268
274
|
side='inline-end'
|
|
269
275
|
ref={forwardedRef}
|
|
@@ -281,7 +287,7 @@ type MainProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> &
|
|
|
281
287
|
|
|
282
288
|
const MainContent = forwardRef<HTMLDivElement, MainProps>(
|
|
283
289
|
({ asChild, classNames, bounce, handlesFocus, children, role, ...props }: MainProps, forwardedRef) => {
|
|
284
|
-
const {
|
|
290
|
+
const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
|
|
285
291
|
const { tx } = useThemeContext();
|
|
286
292
|
const Root = asChild ? Slot : role ? 'div' : 'main';
|
|
287
293
|
|
|
@@ -292,8 +298,8 @@ const MainContent = forwardRef<HTMLDivElement, MainProps>(
|
|
|
292
298
|
role={role}
|
|
293
299
|
{...(handlesFocus && { ...mover })}
|
|
294
300
|
{...props}
|
|
295
|
-
data-sidebar-inline-start-state={
|
|
296
|
-
data-sidebar-inline-end-state={
|
|
301
|
+
data-sidebar-inline-start-state={navigationSidebarState}
|
|
302
|
+
data-sidebar-inline-end-state={complementarySidebarState}
|
|
297
303
|
className={tx('main.content', 'main', { bounce, handlesFocus }, classNames)}
|
|
298
304
|
ref={forwardedRef}
|
|
299
305
|
>
|
|
@@ -309,23 +315,23 @@ type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primit
|
|
|
309
315
|
|
|
310
316
|
const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames, ...props }, forwardedRef) => {
|
|
311
317
|
const [isLg] = useMediaQuery('lg', { ssr: false });
|
|
312
|
-
const {
|
|
318
|
+
const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } =
|
|
313
319
|
useMainContext(MAIN_NAME);
|
|
314
320
|
const { tx } = useThemeContext();
|
|
315
321
|
return (
|
|
316
322
|
<div
|
|
317
323
|
onClick={() => {
|
|
318
|
-
|
|
319
|
-
|
|
324
|
+
setNavigationSidebarState('collapsed');
|
|
325
|
+
setComplementarySidebarState('collapsed');
|
|
320
326
|
}}
|
|
321
327
|
{...props}
|
|
322
328
|
className={tx(
|
|
323
329
|
'main.overlay',
|
|
324
330
|
'main__overlay',
|
|
325
|
-
{ isLg, inlineStartSidebarOpen:
|
|
331
|
+
{ isLg, inlineStartSidebarOpen: navigationSidebarState, inlineEndSidebarOpen: complementarySidebarState },
|
|
326
332
|
classNames,
|
|
327
333
|
)}
|
|
328
|
-
data-state={
|
|
334
|
+
data-state={navigationSidebarState === 'expanded' || complementarySidebarState === 'expanded' ? 'open' : 'closed'}
|
|
329
335
|
aria-hidden='true'
|
|
330
336
|
ref={forwardedRef}
|
|
331
337
|
/>
|
|
@@ -340,6 +346,6 @@ export const Main = {
|
|
|
340
346
|
ComplementarySidebar: MainComplementarySidebar,
|
|
341
347
|
};
|
|
342
348
|
|
|
343
|
-
export { useMainContext, useSidebars };
|
|
349
|
+
export { useMainContext, useSidebars, useLandmarkMover };
|
|
344
350
|
|
|
345
|
-
export type { MainRootProps, MainProps, MainOverlayProps, MainNavigationSidebarProps };
|
|
351
|
+
export type { MainRootProps, MainProps, MainOverlayProps, MainNavigationSidebarProps, SidebarState };
|