@atom-learning/components 3.3.0-beta.0 → 3.3.0-beta.1
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/index.d.ts +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js.map +1 -1
- package/dist/components/pagination/PaginationPopover.js +1 -1
- package/dist/components/pagination/PaginationPopover.js.map +1 -1
- package/dist/components/side-bar/SideBar.d.ts +6 -6
- package/dist/components/side-bar/SideBar.js +1 -1
- package/dist/components/side-bar/SideBar.js.map +1 -1
- package/dist/components/side-bar/SideBarComponents.d.ts +1 -1
- package/dist/components/side-bar/SideBarComponents.js +1 -1
- package/dist/components/side-bar/SideBarComponents.js.map +1 -1
- package/dist/components/side-bar/{SideBarExpandableContext.d.ts → SideBarContext.d.ts} +2 -2
- package/dist/components/side-bar/SideBarContext.js +2 -0
- package/dist/components/side-bar/SideBarContext.js.map +1 -0
- package/dist/components/side-bar/index.d.ts +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/components/side-bar/SideBarExpandableContext.js +0 -2
- package/dist/components/side-bar/SideBarExpandableContext.js.map +0 -1
|
@@ -58,7 +58,7 @@ export { SearchInput } from './search-input';
|
|
|
58
58
|
export { SectionMessage } from './section-message';
|
|
59
59
|
export { Select } from './select';
|
|
60
60
|
export { SelectField } from './select-field';
|
|
61
|
-
export { SideBar,
|
|
61
|
+
export { SideBar, useSidebar } from './side-bar';
|
|
62
62
|
export { Slider } from './slider';
|
|
63
63
|
export { SliderField } from './slider-field';
|
|
64
64
|
export { Sortable } from './sortable';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import o from"react";import{Text as i}from"../text/Text.js";import{styled as n}from"../../stitches.js";import"../side-bar/SideBar.js";import{useSidebar as s}from"../side-bar/SideBarContext.js";const a="160px",r=n.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(i,{fontWeight:"var(--navigation-menu-vertical-item-font-weight)",lineHeight:1.2,variants:{isExpanded:{true:{width:"max-content",maxWidth:a,"@allowMotion":{opacity:1,transform:"translate(0)",transition:"opacity 125ms ease-out, transform 125ms ease-out"}},false:{"@allowMotion":{width:"max-content",maxWidth:a,opacity:0,transform:"translate(8px)",transition:"opacity 125ms ease-out, transform 0ms ease-out 125ms"}}}}}),m=t=>{const{isExpanded:e}=s();return o.createElement(r,{size:"md",as:"span",...t,isExpanded:e})};export{m as NavigationMenuVerticalText};
|
|
2
2
|
//# sourceMappingURL=NavigationMenuVerticalText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalText.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\n\nimport {
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalText.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\n\nimport { useSidebar } from '../side-bar'\n\nconst SIZE_EXPANDED_MAX = '160px'\n\nconst StyledNavigationMenuVerticalText = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text, {\n fontWeight: 'var(--navigation-menu-vertical-item-font-weight)',\n lineHeight: 1.2,\n variants: {\n isExpanded: {\n true: {\n width: 'max-content',\n maxWidth: SIZE_EXPANDED_MAX,\n '@allowMotion': {\n opacity: 1,\n transform: 'translate(0)',\n transition: 'opacity 125ms ease-out, transform 125ms ease-out'\n }\n },\n false: {\n '@allowMotion': {\n width: 'max-content',\n maxWidth: SIZE_EXPANDED_MAX,\n opacity: 0,\n transform: 'translate(8px)',\n transition: 'opacity 125ms ease-out, transform 0ms ease-out 125ms'\n }\n }\n }\n }\n})\n\ntype TStyledNavigationMenuVerticalTextProps = React.ComponentProps<\n typeof StyledNavigationMenuVerticalText\n>\n\nexport const NavigationMenuVerticalText = (\n props: TStyledNavigationMenuVerticalTextProps\n): JSX.Element => {\n const { isExpanded } = useSidebar()\n return (\n <StyledNavigationMenuVerticalText\n size=\"md\"\n as=\"span\"\n {...props}\n isExpanded={isExpanded}\n />\n )\n}\n"],"names":["SIZE_EXPANDED_MAX","StyledNavigationMenuVerticalText","styled","propName","Text","NavigationMenuVerticalText","props","isExpanded","useSidebar","React"],"mappings":"iMAOA,MAAMA,EAAoB,QAEpBC,EAAmCC,EAAO,WAAW,CACzD,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,WAAY,mDACZ,WAAY,IACZ,SAAU,CACR,WAAY,CACV,KAAM,CACJ,MAAO,cACP,SAAUJ,EACV,eAAgB,CACd,QAAS,EACT,UAAW,eACX,WAAY,kDACd,CACF,EACA,MAAO,CACL,eAAgB,CACd,MAAO,cACP,SAAUA,EACV,QAAS,EACT,UAAW,iBACX,WAAY,sDACd,CACF,CACF,CACF,CACF,CAAC,EAMYK,EACXC,GACgB,CAChB,KAAM,CAAE,WAAAC,CAAW,EAAIC,EAAAA,EACvB,OACEC,EAAA,cAACR,EAAA,CACC,KAAK,KACL,GAAG,OACF,GAAGK,EACJ,WAAYC,CAAAA,CACd,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Ellypsis as n}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as l}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as s}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/
|
|
1
|
+
import{Ellypsis as n}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as l}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as s}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../video/Video.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import{PaginationItem as c}from"./PaginationItem.js";import{usePagination as g}from"./usePagination.js";const f=()=>{const{pagesCount:m,labels:i}=g(),p=Array.from({length:m},(o,e)=>e+1);return t.createElement(r,null,t.createElement(r.Trigger,{asChild:!0},t.createElement(a,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(s,{is:n}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(l,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:1,justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(c,{key:o,pageNumber:o,css:{bg:"$white"}})))))};export{f as PaginationPopover};
|
|
2
2
|
//# sourceMappingURL=PaginationPopover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationItem } from './PaginationItem'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = () => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n return (\n <Popover>\n <Popover.Trigger asChild>\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n <Flex\n css={{\n p: '$4',\n display: 'flex',\n flexWrap: 'wrap',\n gap: 1,\n justifyContent: 'center'\n }}\n >\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationItem\n key={pageNumber}\n pageNumber={pageNumber}\n css={{ bg: '$white' }}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","pagesCount","labels","usePagination","paginationItems","_","index","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationItem"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationItem } from './PaginationItem'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = () => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n return (\n <Popover>\n <Popover.Trigger asChild>\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n <Flex\n css={{\n p: '$4',\n display: 'flex',\n flexWrap: 'wrap',\n gap: 1,\n justifyContent: 'center'\n }}\n >\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationItem\n key={pageNumber}\n pageNumber={pageNumber}\n css={{ bg: '$white' }}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","pagesCount","labels","usePagination","paginationItems","_","index","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationItem"],"mappings":"4iHAOO,MAAMA,EAAoB,IAAM,CACrC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EACzBC,EAAAA,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEA,OACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EACtBD,EAAAA,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOP,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZK,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAU,CACtB,CACF,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAAA,EAC7DD,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,EACL,eAAgB,QAClB,CAECR,EAAAA,GAAA,YAAAA,EAAiB,IAAKS,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,IAAK,CAAE,GAAI,QAAS,CAAA,CACtB,CAGN,CAAA,CACF,CACF,CAEJ"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
declare const Root: import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
3
|
-
type?: "expandable" | undefined;
|
|
3
|
+
type?: "static" | "expandable" | undefined;
|
|
4
4
|
}, {
|
|
5
5
|
sm: string;
|
|
6
6
|
md: string;
|
|
@@ -321,10 +321,10 @@ declare const Root: import("@stitches/react/types/styled-component").StyledCompo
|
|
|
321
321
|
};
|
|
322
322
|
}>>;
|
|
323
323
|
declare type SideBarProps = React.ComponentProps<typeof Root> & {
|
|
324
|
-
|
|
324
|
+
offset?: number | string;
|
|
325
325
|
};
|
|
326
326
|
export declare const SideBar: {
|
|
327
|
-
({ className, children, type, ...
|
|
327
|
+
({ className, children, type, offset, css, ...rest }: SideBarProps): JSX.Element;
|
|
328
328
|
Brand: import("@stitches/react/types/styled-component").StyledComponent<"a", {}, {
|
|
329
329
|
sm: string;
|
|
330
330
|
md: string;
|
|
@@ -1617,7 +1617,7 @@ export declare const SideBar: {
|
|
|
1617
1617
|
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
1618
1618
|
};
|
|
1619
1619
|
}>>;
|
|
1620
|
-
|
|
1620
|
+
Header: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
|
|
1621
1621
|
sm: string;
|
|
1622
1622
|
md: string;
|
|
1623
1623
|
lg: string;
|
|
@@ -1936,7 +1936,7 @@ export declare const SideBar: {
|
|
|
1936
1936
|
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
1937
1937
|
};
|
|
1938
1938
|
}>>;
|
|
1939
|
-
|
|
1939
|
+
Body: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
|
|
1940
1940
|
sm: string;
|
|
1941
1941
|
md: string;
|
|
1942
1942
|
lg: string;
|
|
@@ -2255,7 +2255,7 @@ export declare const SideBar: {
|
|
|
2255
2255
|
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
2256
2256
|
};
|
|
2257
2257
|
}>>;
|
|
2258
|
-
|
|
2258
|
+
Footer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
|
|
2259
2259
|
sm: string;
|
|
2260
2260
|
md: string;
|
|
2261
2261
|
lg: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t from"react";import{useInteractOutside as v,useFocusWithin as y,useHover as B}from"react-aria";import{createTheme as g,styled as r}from"../../stitches.js";import{SideBarBrand as S,SideBarBrandLogo as w,SideBarBrandName as E,SideBarHeader as H,SideBarBody as N,SideBarFooter as $}from"./SideBarComponents.js";import{SideBarContext as F}from"./SideBarContext.js";const n="88px",I="256px",W=g({colors:{background:"white",text:"$grey400",border:"$grey200"}}),k=r("div",{position:"sticky",zIndex:1,variants:{type:{static:{},expandable:{width:n}}}}),D=r("div",{bg:"$background",borderRight:"1px solid $border",boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0)",display:"flex",flexDirection:"column",height:"100%",overflow:"hidden",willChange:"width","@allowMotion":{transition:"width 125ms ease-out, box-shadow 125ms ease-out"},variants:{type:{static:{},expandable:{}},isExpanded:{true:{width:I},false:{width:n}}},compoundVariants:[{isExpanded:!0,type:"expandable",css:{boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0.1)"}}]}),L=r("div",{bottom:0,left:0,position:"absolute",right:0,top:0,transition:"all",variants:{isVisible:{true:{visibility:"visible",transitionDelay:"0s"},false:{visibility:"hidden",transitionDelay:"50ms"}}}}),e=({className:l=W,children:p,type:a="expandable",offset:s="0px",css:c,...x})=>{const[o,i]=t.useState(a==="static"),d=t.useRef(null);v({ref:d,onInteractOutside:f=>i(!1)});const{focusWithinProps:h}=y({onFocusWithin:f=>i(!0),onBlurWithin:()=>i(!1)}),{hoverProps:m,isHovered:u}=B({onHoverStart:()=>i(!0),onHoverEnd:()=>i(!1)}),b=a==="expandable"?{...h,...m,onTouchEnd:()=>i(!0),ref:d}:{};return t.createElement(F.Provider,{value:{isExpanded:o}},t.createElement(k,{...x,className:l,css:{height:`calc(100svh - ${s})`,top:s,...c},type:a},t.createElement(D,{...b,isExpanded:o,type:a},p,a==="expandable"&&t.createElement(L,{isVisible:!u&&!o}))))};e.Brand=S,e.BrandLogo=w,e.BrandName=E,e.Header=H,e.Body=N,e.Footer=$,e.displayName="SideBar";export{e as SideBar};
|
|
2
2
|
//# sourceMappingURL=SideBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { createTheme, styled } from '~/stitches'\n\nimport {\n SideBarBody,\n SideBarBrand,\n SideBarBrandLogo,\n SideBarBrandName,\n SideBarFooter,\n SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst SIZE_COLLAPSED = '88px'\nconst SIZE_EXPANDED = '256px'\n\nconst light = createTheme({\n colors: {\n background: 'white',\n text: '$grey400',\n border: '$grey200'\n }\n})\n\nconst Root = styled('div', {\n position: 'sticky',\n zIndex: 1,\n variants: {\n type: {\n static: {},\n expandable: { width: SIZE_COLLAPSED }\n }\n }\n})\n\nconst Content = styled('div', {\n bg: '$background',\n borderRight: '1px solid $border',\n boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0)',\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n overflow: 'hidden',\n willChange: 'width',\n '@allowMotion': {\n transition: 'width 125ms ease-out, box-shadow 125ms ease-out'\n },\n variants: {\n type: {\n static: {},\n expandable: {}\n },\n isExpanded: {\n true: { width: SIZE_EXPANDED },\n false: { width: SIZE_COLLAPSED }\n }\n },\n compoundVariants: [\n {\n isExpanded: true,\n type: 'expandable',\n css: { boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0.1)' }\n }\n ]\n})\n\nconst PointerBlocker = styled('div', {\n bottom: 0,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n transition: 'all',\n variants: {\n isVisible: {\n true: { visibility: 'visible', transitionDelay: '0s' },\n false: { visibility: 'hidden', transitionDelay: '50ms' }\n }\n }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n offset?: number | string\n}\n\nexport const SideBar = ({\n className = light,\n children,\n type = 'expandable',\n offset = '0px',\n css,\n ...rest\n}: SideBarProps) => {\n const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n const ref = React.useRef<HTMLDivElement>(null)\n\n useInteractOutside({\n ref,\n onInteractOutside: (e) => setIsExpanded(false)\n })\n const { focusWithinProps } = useFocusWithin({\n onFocusWithin: (e) => setIsExpanded(true),\n onBlurWithin: () => setIsExpanded(false)\n })\n const { hoverProps, isHovered } = useHover({\n onHoverStart: () => setIsExpanded(true),\n onHoverEnd: () => setIsExpanded(false)\n })\n const touchProps = {\n onTouchEnd: () => setIsExpanded(true)\n }\n\n const expandableProps =\n type === 'expandable'\n ? {\n ...focusWithinProps,\n ...hoverProps,\n ...touchProps,\n ref\n }\n : {}\n\n return (\n <SideBarContext.Provider value={{ isExpanded }}>\n <Root\n {...rest}\n className={className}\n css={{ height: `calc(100svh - ${offset})`, top: offset, ...css }}\n type={type}\n >\n <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n {children}\n {/**\n * When the SideBar is collapsed, ensure that the initial tap event\n * is used to expand the nav first before making the items available\n */}\n {type === 'expandable' && (\n <PointerBlocker isVisible={!isHovered && !isExpanded} />\n )}\n </Content>\n </Root>\n </SideBarContext.Provider>\n )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["SIZE_COLLAPSED","SIZE_EXPANDED","light","createTheme","Root","styled","Content","PointerBlocker","SideBar","className","children","type","offset","css","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","e","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"iXAeA,MAAMA,EAAiB,OACjBC,EAAgB,QAEhBC,EAAQC,EAAY,CACxB,OAAQ,CACN,WAAY,QACZ,KAAM,WACN,OAAQ,UACV,CACF,CAAC,EAEKC,EAAOC,EAAO,MAAO,CACzB,SAAU,SACV,OAAQ,EACR,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,CAAE,MAAOL,CAAe,CACtC,CACF,CACF,CAAC,EAEKM,EAAUD,EAAO,MAAO,CAC5B,GAAI,cACJ,YAAa,oBACb,UAAW,qCACX,QAAS,OACT,cAAe,SACf,OAAQ,OACR,SAAU,SACV,WAAY,QACZ,eAAgB,CACd,WAAY,iDACd,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,EACd,EACA,WAAY,CACV,KAAM,CAAE,MAAOJ,CAAc,EAC7B,MAAO,CAAE,MAAOD,CAAe,CACjC,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,IAAK,CAAE,UAAW,sCAAuC,CAC3D,CACF,CACF,CAAC,EAEKO,EAAiBF,EAAO,MAAO,CACnC,OAAQ,EACR,KAAM,EACN,SAAU,WACV,MAAO,EACP,IAAK,EACL,WAAY,MACZ,SAAU,CACR,UAAW,CACT,KAAM,CAAE,WAAY,UAAW,gBAAiB,IAAK,EACrD,MAAO,CAAE,WAAY,SAAU,gBAAiB,MAAO,CACzD,CACF,CACF,CAAC,EAMYG,EAAU,CAAC,CACtB,UAAAC,EAAYP,EACZ,SAAAQ,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,IAAAC,KACGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASN,IAAS,QAAQ,EAC9DO,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAoBE,GAAMJ,EAAc,EAAK,CAC/C,CAAC,EACD,KAAM,CAAE,iBAAAK,CAAiB,EAAIC,EAAe,CAC1C,cAAgBF,GAAMJ,EAAc,EAAI,EACxC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMT,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKU,EACJf,IAAS,aACL,CACE,GAAGU,EACH,GAAGE,EAPT,WAAY,IAAMP,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAAA,EAEN,OACED,EAAA,cAACU,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAZ,CAAW,CAC3CE,EAAAA,EAAA,cAACb,EAAA,CACE,GAAGU,EACJ,UAAWL,EACX,IAAK,CAAE,OAAQ,iBAAiBG,KAAW,IAAKA,EAAQ,GAAGC,CAAI,EAC/D,KAAMF,GAENM,EAAA,cAACX,EAAA,CAAS,GAAGoB,EAAiB,WAAYX,EAAY,KAAMJ,CAAAA,EACzDD,EAKAC,IAAS,cACRM,EAAA,cAACV,EAAA,CAAe,UAAW,CAACiB,GAAa,CAACT,CAAAA,CAAY,CAE1D,CACF,CACF,CAEJ,EAEAP,EAAQ,MAAQoB,EAChBpB,EAAQ,UAAYqB,EACpBrB,EAAQ,UAAYsB,EACpBtB,EAAQ,OAASuB,EACjBvB,EAAQ,KAAOwB,EACfxB,EAAQ,OAASyB,EAEjBzB,EAAQ,YAAc"}
|
|
@@ -318,7 +318,7 @@ export declare const SideBarHeader: import("@stitches/react/types/styled-compone
|
|
|
318
318
|
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
319
319
|
};
|
|
320
320
|
}>>;
|
|
321
|
-
export declare const
|
|
321
|
+
export declare const SideBarBody: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
|
|
322
322
|
sm: string;
|
|
323
323
|
md: string;
|
|
324
324
|
lg: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{styled as o}from"../../stitches.js";import{Image as
|
|
1
|
+
import{styled as o}from"../../stitches.js";import{Image as e}from"../image/Image.js";import{Text as r}from"../text/Text.js";const d=o("div",{borderBottom:"1px solid $border",p:"$4",width:"100%"}),t=o("div",{flexGrow:1,overflowY:"auto",overflowX:"hidden",p:"$4",width:"100%"}),i=o("div",{borderTop:"1px solid $border",p:"$4",width:"100%"}),a=o("a",{alignItems:"center",color:"$text",display:"flex",textDecoration:"none","&:hover, &:focus":{textDecoration:"none"}}),n=e,l=o(r,{color:"$text"});export{t as SideBarBody,a as SideBarBrand,n as SideBarBrandLogo,l as SideBarBrandName,i as SideBarFooter,d as SideBarHeader};
|
|
2
2
|
//# sourceMappingURL=SideBarComponents.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n borderBottom: '1px solid $border',\n p: '$4',\n width: '100%'\n})\n\nexport const
|
|
1
|
+
{"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n borderBottom: '1px solid $border',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarBody = styled('div', {\n flexGrow: 1,\n overflowY: 'auto',\n overflowX: 'hidden',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarFooter = styled('div', {\n borderTop: '1px solid $border',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarBrand = styled('a', {\n alignItems: 'center',\n color: '$text',\n display: 'flex',\n textDecoration: 'none',\n '&:hover, &:focus': {\n textDecoration: 'none'\n }\n})\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n color: '$text'\n})\n"],"names":["SideBarHeader","styled","SideBarBody","SideBarFooter","SideBarBrand","SideBarBrandLogo","Image","SideBarBrandName","Text"],"mappings":"4HAKa,MAAAA,EAAgBC,EAAO,MAAO,CACzC,aAAc,oBACd,EAAG,KACH,MAAO,MACT,CAAC,EAEYC,EAAcD,EAAO,MAAO,CACvC,SAAU,EACV,UAAW,OACX,UAAW,SACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYE,EAAgBF,EAAO,MAAO,CACzC,UAAW,oBACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYG,EAAeH,EAAO,IAAK,CACtC,WAAY,SACZ,MAAO,QACP,QAAS,OACT,eAAgB,OAChB,mBAAoB,CAClB,eAAgB,MAClB,CACF,CAAC,EAEYI,EAAmBC,EAEnBC,EAAmBN,EAAOO,EAAM,CAC3C,MAAO,OACT,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const SideBarContext: React.Context<{
|
|
3
3
|
isExpanded?: boolean | undefined;
|
|
4
4
|
}>;
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const useSidebar: () => {
|
|
6
6
|
isExpanded?: boolean | undefined;
|
|
7
7
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SideBarContext.js","sources":["../../../src/components/side-bar/SideBarContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n isExpanded?: boolean\n}>({\n isExpanded: undefined\n})\n\nexport const useSidebar = () => React.useContext(SideBarContext)\n"],"names":["SideBarContext","React","useSidebar"],"mappings":"wBAEa,MAAAA,EAAiBC,EAAM,cAEjC,CACD,WAAY,MACd,CAAC,EAEYC,EAAa,IAAMD,EAAM,WAAWD,CAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { SideBar } from './SideBar';
|
|
2
|
-
export {
|
|
2
|
+
export { useSidebar } from './SideBarContext';
|