@idea-fragments/react-components-zendesk 0.1.24 → 0.1.25

package/dist/layouts.js

@@ -11782,7 +11782,7 @@ Dropdown=styled__default["default"](Dropdown)(templateObject_1$6||(templateObjec
 onChange:DO_NOTHING,onStateChange:DO_NOTHING};styled__default["default"](Multiselect)(templateObject_5||(templateObject_5=__makeTemplateObject(["\n  && {\n    div { max-width: 100%; }\n  }\n"],["\n  && {\n    div { max-width: 100%; }\n  }\n"])));var Label=styled__default["default"](Label$1)(templateObject_6||(templateObject_6=__makeTemplateObject(["\n  && { color: ","; }\n"],["\n  && { color: ","; }\n"])),function(p){return p.theme.styles.textColorPrimary;});var createOptions=function(options,key,label,menuItemComponent,isFilteringOptions,isClearable){if(isClearable===void 0){isClearable=false;}if(isFilteringOptions)return[jsxRuntime.jsx(Item,__assign({disabled:true},{children:"Loading items..."}))];if(isEmpty(options))return[jsxRuntime.jsx(Item,__assign({disabled:true},{children:"No matches found"}))];var nodes=options.map(function(o){var _a;var ItemType=getItemType(o);var Component=menuItemComponent;return jsxRuntime.jsx(ItemType,__assign({value:o,disabled:(_a=o.disabled)!==null&&_a!==void 0?_a:false,danger:o.danger},{children:Component?jsxRuntime.jsx(Component,__assign({},o)):o[label]}),o[key]);});if(isClearable){nodes.unshift(jsxRuntime.jsx(Item,__assign({value:CLEAR_OPTION},{children:CLEAR_OPTION.label}),CLEAR_OPTION.value));}return nodes;};var templateObject_1$6,templateObject_2$3,templateObject_3$1,templateObject_4,templateObject_5,templateObject_6;var COMPONENT_NAME="OverflowMenu";var OverflowButton=styled__default["default"](OverflowButton$1).attrs(function(_a){var theme=_a.theme;return{icon:js.mdiDotsVertical,"data-component-name":COMPONENT_NAME,compact:true,color:lightness(theme.styles.textColorPrimary,95),"aria-label":"Row actions",size:"small",primary:true,iconSize:"1.2rem",as:Button// color:                 darker(COLORS.GREY),
 // pill:                  true,
 };})(templateObject_1$5||(templateObject_1$5=__makeTemplateObject(["\n  &&&& {\n    margin-top: 4px;\n    padding: 0 4px;\n  }\n"],["\n  &&&& {\n    margin-top: 4px;\n    padding: 0 4px;\n  }\n"])));var OverflowMenu=function(_a){var actions=_a.actions,appendToNode=_a.appendToNode,placement=_a.placement;return jsxRuntime.jsx(Dropdown,{appendMenuToNode:appendToNode,keyField:"label",labelField:"label",// @ts-ignore
-onChange:function(_a){var action=_a.action;action();},options:actions,placement:placement,returnItemOnChange:true,trigger:jsxRuntime.jsx(OverflowButton,{})});};var templateObject_1$5;var PhonesOnly=function(_a){var children=_a.children;var _b=__read(React__default.useState(deviceSizeWatcher.isPhone()),2),isVisible=_b[0],setIsVisibleTo=_b[1];React__default.useEffect(function(){deviceSizeWatcher.subscribe(function(_){setIsVisibleTo(deviceSizeWatcher.isPhone());});},[]);return isVisible?jsxRuntime.jsx(jsxRuntime.Fragment,{children:children}):null;};var PhonesAndTabletsOnly=function(_a){var children=_a.children;var isPhoneOrTablet=function(){return deviceSizeWatcher.isPhone()||deviceSizeWatcher.isTablet()||deviceSizeWatcher.isLargeTablet();};var _b=__read(React__default.useState(isPhoneOrTablet()),2),isVisible=_b[0],setIsVisibleTo=_b[1];React__default.useEffect(function(){deviceSizeWatcher.subscribe(function(_){setIsVisibleTo(isPhoneOrTablet());});},[]);return isVisible?jsxRuntime.jsx(jsxRuntime.Fragment,{children:children}):null;};var hideTitle=styled.css(templateObject_1$4||(templateObject_1$4=__makeTemplateObject(["\n  & > h1,\n  & > h2,\n  & > h3,\n  & > h4,\n  & > h5,\n  & > h6 {\n    display: none;\n  }\n"],["\n  & > h1,\n  & > h2,\n  & > h3,\n  & > h4,\n  & > h5,\n  & > h6 {\n    display: none;\n  }\n"])));var Section=styled__default["default"].section(templateObject_2$2||(templateObject_2$2=__makeTemplateObject(["\n  background: ",";\n  border-radius: ",";\n  box-shadow: ",";\n  margin: ",";\n  padding: ",";\n  \n  ","\n  ","\n  \n  & > :first-child {\n    margin-top: 0;\n    padding-top: 0;\n  }\n  \n  & > section {\n    padding-bottom: 0;\n  }\n  \n  & + section {\n    //padding-top: 0;\n  }\n"],["\n  background: ",";\n  border-radius: ",";\n  box-shadow: ",";\n  margin: ",";\n  padding: ",";\n  \n  ","\n  ","\n  \n  & > :first-child {\n    margin-top: 0;\n    padding-top: 0;\n  }\n  \n  & > section {\n    padding-bottom: 0;\n  }\n  \n  & + section {\n    //padding-top: 0;\n  }\n"])),function(_a){var color=_a.color,theme=_a.theme;return color?color:theme.styles.section.background;},function(p){return p.theme.styles.section.borderRadius;},function(p){return p.theme.styles.section.shadow;},function(p){return p.theme.styles.section.margin;},function(p){return p.theme.styles.section.padding;},function(_a){var color=_a.color;return color?textColorForBackground:"";},function(_a){var titleHidden=_a.titleHidden;return titleHidden?hideTitle:"";});var templateObject_1$4,templateObject_2$2;var SectionHeader=styled__default["default"](function(_a){var actions=_a.actions,title=_a.children,caption=_a.caption;return jsxRuntime.jsxs(Container$2,__assign({withRows:true},{children:[jsxRuntime.jsxs(FlexBox,__assign({fluid:true},{children:[jsxRuntime.jsx(Text,{children:title}),actions?jsxRuntime.jsx(FlexBox,{children:actions}):null]})),jsxRuntime.jsx(Text,{children:caption})]}));})(templateObject_1$3||(templateObject_1$3=__makeTemplateObject([""],[""])));var Container$2=styled__default["default"](FlexBox)(templateObject_2$1||(templateObject_2$1=__makeTemplateObject(["\n  padding: "," 0;\n  width: 100%;\n"],["\n  padding: "," 0;\n  width: 100%;\n"])),SPACINGS.MD);var Text=styled__default["default"].div(templateObject_3||(templateObject_3=__makeTemplateObject(["\n  flex: 1;\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6,\n  & p {\n    margin: 0;\n  }\n\n"],["\n  flex: 1;\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6,\n  & p {\n    margin: 0;\n  }\n\n"])));var templateObject_1$3,templateObject_2$1,templateObject_3;var Sidebar=function(_a){var actions=_a.actions,actionIconSize=_a.actionIconSize,activeAction=_a.activeAction,logo=_a.logo,lowerActions=_a.lowerActions;var createActionButtons=function(actions){return actions.map(function(a){var as=a.as,icon=a.icon,label=a.label;var props={active:label===activeAction,as:as,_css:actionButtonStyles,fluid:true,icon:icon,iconPosition:"left",iconSize:actionIconSize,key:label,size:BUTTON_SIZES.SMALL};return a.href?jsxRuntime.jsx(ButtonLink,__assign({href:a.href},props,{children:a.label})):jsxRuntime.jsx(Button,__assign({onClick:a.onClick},props,{children:a.label}));});};return jsxRuntime.jsxs(Container$1,__assign({gap:SPACINGS.XXXL,withRows:true},{children:[logo,jsxRuntime.jsx(FlexBox,__assign({fluid:true,gap:SPACINGS.XS,withRows:true},{children:createActionButtons(actions)})),jsxRuntime.jsx(FlexBox,__assign({gap:SPACINGS.XS,withRows:true},{children:lowerActions?createActionButtons(lowerActions):null}))]}));};var actionButtonStyles=styled.css(templateObject_1$2||(templateObject_1$2=__makeTemplateObject(["\n  &&&&& {\n    border-radius: ",";\n    justify-content: flex-start;\n    background: ",";\n    color: ",";\n\n    :hover {\n      color: ",";\n    }\n  }\n"],["\n  &&&&& {\n    border-radius: ",";\n    justify-content: flex-start;\n    background: ",";\n    color: ",";\n\n    :hover {\n      color: ",";\n    }\n  }\n"])),function(_a){var theme=_a.theme;return theme.styles.sidebar.actionButton.borderRadius;},function(_a){var active=_a.active,theme=_a.theme;return active?theme.styles.sidebar.actionButton.color:"transparent";},function(_a){var active=_a.active,theme=_a.theme;return active?theme.styles.textColorPrimary:fade(theme.styles.textColorPrimary,.2);},function(_a){var theme=_a.theme;return theme.styles.textColorPrimary;});var Container$1=styled__default["default"](FlexBox)(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  background: ",";\n  height: 100%;\n  padding: ",";\n  width: ",";\n  flex-shrink: 0;\n"],["\n  background: ",";\n  height: 100%;\n  padding: ",";\n  width: ",";\n  flex-shrink: 0;\n"])),function(_a){var theme=_a.theme;return theme.styles.sidebar.background;},function(_a){var theme=_a.theme;return theme.styles.sidebar.padding;},function(_a){var theme=_a.theme;return theme.styles.sidebar.width;});var templateObject_1$2,templateObject_2;var SidebarLayout=function(_a){var sidebar=_a.sidebar,mainContent=_a.mainContent;return jsxRuntime.jsxs(Container,__assign({gap:"unset"},{children:[sidebar,mainContent]}));};var Container=styled__default["default"](FlexBox)(templateObject_1$1||(templateObject_1$1=__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n"],["\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n"])));var templateObject_1$1;var TabletsOnly=function(_a){var children=_a.children;var isCorrectSize=function(){return deviceSizeWatcher.isTablet()||deviceSizeWatcher.isLargeTablet();};var _b=__read(React__default.useState(isCorrectSize()),2),isVisible=_b[0],setIsVisibleTo=_b[1];React__default.useEffect(function(){deviceSizeWatcher.subscribe(function(_){setIsVisibleTo(isCorrectSize());});},[]);return isVisible?jsxRuntime.jsx(jsxRuntime.Fragment,{children:children}):null;};function canUseDOM(){return!!(typeof window!=="undefined"&&window.document&&window.document.createElement);}/**
+onChange:function(_a){var action=_a.action;action();},options:actions,placement:placement,returnItemOnChange:true,trigger:jsxRuntime.jsx(OverflowButton,{})});};var templateObject_1$5;var PhonesOnly=function(_a){var children=_a.children;var _b=__read(React__default.useState(deviceSizeWatcher.isPhone()),2),isVisible=_b[0],setIsVisibleTo=_b[1];React__default.useEffect(function(){deviceSizeWatcher.subscribe(function(_){setIsVisibleTo(deviceSizeWatcher.isPhone());});},[]);return isVisible?jsxRuntime.jsx(jsxRuntime.Fragment,{children:children}):null;};var PhonesAndTabletsOnly=function(_a){var children=_a.children;var isPhoneOrTablet=function(){return deviceSizeWatcher.isPhone()||deviceSizeWatcher.isTablet()||deviceSizeWatcher.isLargeTablet();};var _b=__read(React__default.useState(isPhoneOrTablet()),2),isVisible=_b[0],setIsVisibleTo=_b[1];React__default.useEffect(function(){deviceSizeWatcher.subscribe(function(_){setIsVisibleTo(isPhoneOrTablet());});},[]);return isVisible?jsxRuntime.jsx(jsxRuntime.Fragment,{children:children}):null;};var hideTitle=styled.css(templateObject_1$4||(templateObject_1$4=__makeTemplateObject(["\n  & > h1,\n  & > h2,\n  & > h3,\n  & > h4,\n  & > h5,\n  & > h6 {\n    display: none;\n  }\n"],["\n  & > h1,\n  & > h2,\n  & > h3,\n  & > h4,\n  & > h5,\n  & > h6 {\n    display: none;\n  }\n"])));var Section=styled__default["default"].section(templateObject_2$2||(templateObject_2$2=__makeTemplateObject(["\n  background: ",";\n  border-radius: ",";\n  box-shadow: ",";\n  margin: ",";\n  padding: ",";\n  \n  ","\n  ","\n  \n  & > :first-child {\n    margin-top: 0;\n    padding-top: 0;\n  }\n  \n  & > section {\n    padding-bottom: 0;\n  }\n  \n  & + section {\n    //padding-top: 0;\n  }\n"],["\n  background: ",";\n  border-radius: ",";\n  box-shadow: ",";\n  margin: ",";\n  padding: ",";\n  \n  ","\n  ","\n  \n  & > :first-child {\n    margin-top: 0;\n    padding-top: 0;\n  }\n  \n  & > section {\n    padding-bottom: 0;\n  }\n  \n  & + section {\n    //padding-top: 0;\n  }\n"])),function(_a){var color=_a.color,theme=_a.theme;return color?color:theme.styles.section.background;},function(p){return p.theme.styles.section.borderRadius;},function(p){return p.theme.styles.section.shadow;},function(p){return p.theme.styles.section.margin;},function(p){return p.theme.styles.section.padding;},function(_a){var color=_a.color;return color?textColorForBackground:"";},function(_a){var titleHidden=_a.titleHidden;return titleHidden?hideTitle:"";});var templateObject_1$4,templateObject_2$2;var SectionHeader=styled__default["default"](function(_a){var actions=_a.actions,children=_a.children,caption=_a.caption,_b=_a.title,title=_b===void 0?children:_b;return jsxRuntime.jsxs(Container$2,__assign({withRows:true},{children:[jsxRuntime.jsxs(FlexBox,__assign({fluid:true},{children:[jsxRuntime.jsx(Text,{children:title}),jsxRuntime.jsx(ComputersOnly,{children:actions?jsxRuntime.jsx(FlexBox,{children:actions}):null})]})),jsxRuntime.jsx(Text,{children:caption}),jsxRuntime.jsx(PhonesAndTabletsOnly,{children:actions?jsxRuntime.jsx(FlexBox,__assign({withRows:true},{children:actions})):null})]}));})(templateObject_1$3||(templateObject_1$3=__makeTemplateObject([""],[""])));var Container$2=styled__default["default"](FlexBox)(templateObject_2$1||(templateObject_2$1=__makeTemplateObject(["\n  width: 100%;\n"],["\n  width: 100%;\n"])));var Text=styled__default["default"].div(templateObject_3||(templateObject_3=__makeTemplateObject(["\n  flex: 1;\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6,\n  & p {\n    margin: 0;\n  }\n\n"],["\n  flex: 1;\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6,\n  & p {\n    margin: 0;\n  }\n\n"])));var templateObject_1$3,templateObject_2$1,templateObject_3;var Sidebar=function(_a){var actions=_a.actions,actionIconSize=_a.actionIconSize,activeAction=_a.activeAction,logo=_a.logo,lowerActions=_a.lowerActions;var createActionButtons=function(actions){return actions.map(function(a){var as=a.as,icon=a.icon,label=a.label;var props={active:label===activeAction,as:as,_css:actionButtonStyles,fluid:true,icon:icon,iconPosition:"left",iconSize:actionIconSize,key:label,size:BUTTON_SIZES.SMALL};return a.href?jsxRuntime.jsx(ButtonLink,__assign({href:a.href},props,{children:a.label})):jsxRuntime.jsx(Button,__assign({onClick:a.onClick},props,{children:a.label}));});};return jsxRuntime.jsxs(Container$1,__assign({gap:SPACINGS.XXXL,withRows:true},{children:[logo,jsxRuntime.jsx(FlexBox,__assign({fluid:true,gap:SPACINGS.XS,withRows:true},{children:createActionButtons(actions)})),jsxRuntime.jsx(FlexBox,__assign({gap:SPACINGS.XS,withRows:true},{children:lowerActions?createActionButtons(lowerActions):null}))]}));};var actionButtonStyles=styled.css(templateObject_1$2||(templateObject_1$2=__makeTemplateObject(["\n  &&&&& {\n    border-radius: ",";\n    justify-content: flex-start;\n    background: ",";\n    color: ",";\n\n    :hover {\n      color: ",";\n    }\n  }\n"],["\n  &&&&& {\n    border-radius: ",";\n    justify-content: flex-start;\n    background: ",";\n    color: ",";\n\n    :hover {\n      color: ",";\n    }\n  }\n"])),function(_a){var theme=_a.theme;return theme.styles.sidebar.actionButton.borderRadius;},function(_a){var active=_a.active,theme=_a.theme;return active?theme.styles.sidebar.actionButton.color:"transparent";},function(_a){var active=_a.active,theme=_a.theme;return active?theme.styles.textColorPrimary:fade(theme.styles.textColorPrimary,.2);},function(_a){var theme=_a.theme;return theme.styles.textColorPrimary;});var Container$1=styled__default["default"](FlexBox)(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  background: ",";\n  height: 100%;\n  padding: ",";\n  width: ",";\n  flex-shrink: 0;\n"],["\n  background: ",";\n  height: 100%;\n  padding: ",";\n  width: ",";\n  flex-shrink: 0;\n"])),function(_a){var theme=_a.theme;return theme.styles.sidebar.background;},function(_a){var theme=_a.theme;return theme.styles.sidebar.padding;},function(_a){var theme=_a.theme;return theme.styles.sidebar.width;});var templateObject_1$2,templateObject_2;var SidebarLayout=function(_a){var sidebar=_a.sidebar,mainContent=_a.mainContent;return jsxRuntime.jsxs(Container,__assign({gap:"unset"},{children:[sidebar,mainContent]}));};var Container=styled__default["default"](FlexBox)(templateObject_1$1||(templateObject_1$1=__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n"],["\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n"])));var templateObject_1$1;var TabletsOnly=function(_a){var children=_a.children;var isCorrectSize=function(){return deviceSizeWatcher.isTablet()||deviceSizeWatcher.isLargeTablet();};var _b=__read(React__default.useState(isCorrectSize()),2),isVisible=_b[0],setIsVisibleTo=_b[1];React__default.useEffect(function(){deviceSizeWatcher.subscribe(function(_){setIsVisibleTo(isCorrectSize());});},[]);return isVisible?jsxRuntime.jsx(jsxRuntime.Fragment,{children:children}):null;};function canUseDOM(){return!!(typeof window!=="undefined"&&window.document&&window.document.createElement);}/**
  * React currently throws a warning when using useLayoutEffect on the server. To
  * get around it, we can conditionally useEffect on the server (no-op) and
  * useLayoutEffect in the browser. We occasionally need useLayoutEffect to