@bikdotai/bik-component-library 0.0.799-beta.21 → 0.0.799-beta.3
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/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.d.ts +0 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js +4 -8
- package/dist/cjs/components/dropdown/type.d.ts +0 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.d.ts +1 -3
- package/dist/cjs/components/dropdown-button/DropdownButton.js +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.style.d.ts +1 -6
- package/dist/cjs/components/dropdown-button/DropdownButton.style.js +6 -10
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.d.ts +0 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js +2 -6
- package/dist/esm/components/dropdown/type.d.ts +0 -1
- package/dist/esm/components/dropdown-button/DropdownButton.d.ts +1 -3
- package/dist/esm/components/dropdown-button/DropdownButton.js +1 -1
- package/dist/esm/components/dropdown-button/DropdownButton.style.d.ts +1 -6
- package/dist/esm/components/dropdown-button/DropdownButton.style.js +6 -10
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("./MenuItem.js"),s=require("./MenuList.styled.js");const r=n.forwardRef(((r,o)=>{let{options:l,isMultiSelect:i,showDescription:u,onSelect:c,version:a,onInfiniteScroll:d,onDropdownItemClick:p,useDefaultCursor:f,focusedIndex:b=-1,isDraggable:g=!1,onOptionsReorder:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("./MenuItem.js"),s=require("./MenuList.styled.js");const r=n.forwardRef(((r,o)=>{let{options:l,isMultiSelect:i,showDescription:u,onSelect:c,version:a,onInfiniteScroll:d,onDropdownItemClick:p,useDefaultCursor:f,focusedIndex:b=-1,isDraggable:g=!1,onOptionsReorder:m,showCheckboxForCustomElement:h=!1}=r;const D=n.useRef(null),j=n.useRef(null),[x,v]=n.useState(null),[C,I]=n.useState(null),w=n.useCallback((()=>{D.current&&D.current.disconnect(),D.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==d||d())})),j.current&&D.current.observe(j.current)}),[d]);n.useEffect((()=>(w(),()=>{D.current&&D.current.disconnect()})),[w,l]);const k=n.useCallback((e=>n=>{g&&(v(e),n.dataTransfer.effectAllowed="move")}),[g]),S=n.useCallback((e=>n=>{g&&(n.preventDefault(),n.dataTransfer.dropEffect="move",I(e))}),[g]),M=n.useCallback((e=>n=>{if(g&&null!==x){if(n.preventDefault(),x!==e){const n=[...l],[t]=n.splice(x,1);n.splice(e,0,t),null==m||m(n)}v(null),I(null)}}),[g,x,l,m]),E=n.useCallback((()=>{v(null),I(null)}),[]),O=new Map;let y=-1;return l.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||(y++,O.set(e,y))}));else{const n=e;n.disabled||(y++,O.set(n,y))}})),e.jsx(e.Fragment,{children:l.map(((n,r)=>{const d=r===l.length-1;if(n.options){const l=n;return e.jsxs("div",Object.assign({style:{marginTop:"2.0"===a?2:0}},{children:[e.jsxs(s.StyledGroupedLabel,Object.assign({version:a},{children:[l.leadingIcon?e.jsx("span",Object.assign({style:{marginRight:8}},{children:l.leadingIcon})):null,l.label]})),l.options.map(((n,s)=>{const d=O.get(n),g=d===b&&!n.disabled;return e.jsx(t.MenuItem,{version:a,last:s===l.options.length-1,onSelect:c,showDescription:u,onDropdownItemClick:p,isMultiSelect:i,option:n,useDefaultCursor:f,isFocused:g,dataIndex:d,isDraggable:!1,showCheckboxForCustomElement:h,ref:e=>{o&&"object"==typeof o&&o.current&&e&&e&&e&&e&&(o.current[r]=e)}},`${r}-${s}`)})),d?e.jsx("span",{ref:j}):null]}),r)}const m=n,D=O.get(m),x=D===b&&!m.disabled;return e.jsxs("div",{children:[e.jsx(t.MenuItem,{version:a,last:d,onSelect:c,showDescription:u,onDropdownItemClick:p,isMultiSelect:i,option:m,useDefaultCursor:f,isFocused:x,dataIndex:D,isDraggable:g,onDragStart:k(r),onDragOver:S(r),onDrop:M(r),onDragEnd:E,isDraggedOver:C===r,showCheckboxForCustomElement:h,ref:e=>{o&&"object"==typeof o&&o.current&&e&&(o.current[r]=e)}},m.value),d?e.jsx("span",{ref:j}):null]},r)}))})}));exports.MenuList=r;
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),
|
|
2
|
-
height: 1px;
|
|
3
|
-
background-color: ${o.COLORS.stroke.primary};
|
|
4
|
-
margin: 4px 8px;
|
|
5
|
-
`,s=n.default(r.BodyCaption)`
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),o=require("../../../../TypographyStyle.js"),r=require("../../../../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=t(e).default(o.BodyCaption)`
|
|
6
2
|
padding: 8px ${e=>"2.0"===e.version?12:16}px;
|
|
7
|
-
color: ${e=>"2.0"===e.version?
|
|
8
|
-
background-color: ${e=>"2.0"===e.version?
|
|
3
|
+
color: ${e=>"2.0"===e.version?r.COLORS.content.placeholder:r.COLORS.content.secondary};
|
|
4
|
+
background-color: ${e=>"2.0"===e.version?r.COLORS.surface.standard:r.COLORS.background.base};
|
|
9
5
|
font-size: ${e=>"2.0"===e.version?10:12}px;
|
|
10
|
-
`;exports.
|
|
6
|
+
`;exports.StyledGroupedLabel=n;
|
|
@@ -80,7 +80,6 @@ export type SingleOption = {
|
|
|
80
80
|
children?: SingleOption[];
|
|
81
81
|
parent?: SingleOption;
|
|
82
82
|
'data-test'?: string;
|
|
83
|
-
hasDivider?: boolean;
|
|
84
83
|
};
|
|
85
84
|
export type MultiSelectOption = SingleOption;
|
|
86
85
|
export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownProps } from "../dropdown";
|
|
3
3
|
import { ButtonProps } from '../button/model';
|
|
4
|
-
import { IconButtonProps } from '../icon-button/model';
|
|
5
4
|
export interface DropdownButtonProps {
|
|
6
5
|
dropdownProps: DropdownProps;
|
|
6
|
+
buttonProps: ButtonProps;
|
|
7
7
|
iconProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
|
8
|
-
buttonProps?: ButtonProps;
|
|
9
|
-
iconButtonProps?: IconButtonProps;
|
|
10
8
|
}
|
|
11
9
|
export declare const DropdownButton: React.FC<DropdownButtonProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),r=require("../dropdown/DropdownPopover/index.js");require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("react"),require("../zeroState/ZeroState.js"),require("../../constants/Theme.js"),require("lodash/debounce"),require("../TypographyStyle.js"),require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js");var n=require("../button/Button.js");require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js");var t=require("../button/themes.js"),s=require("../spinner/Spinner.js"),i=require("./DropdownButton.style.js");exports.DropdownButton=d=>{var p,u;const a=d.buttonProps,l=e.__rest(a,["onClick"]);return o.jsxs(i.DropdownButtonStyle,Object.assign({type:d.buttonProps.buttonType,disabled:d.buttonProps.disabled},{children:[(null===(p=d.buttonProps)||void 0===p?void 0:p.isLoading)&&o.jsx(i.LoaderContainer,Object.assign({type:d.buttonProps.buttonType},{children:o.jsx(s.Spinner,{className:"spinner",size:"small",color:t.SpinnerColorMap(d.buttonProps.buttonType||"primary",d.buttonProps.inverse)})})),o.jsx(n.Button,Object.assign({},d.buttonProps,{isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"}})),o.jsx("div",{className:"dd-button-divider"}),o.jsx(r.DropdownPopover,Object.assign({},d.dropdownProps,{isChildLoading:null===(u=d.buttonProps)||void 0===u?void 0:u.isLoading},{children:o.jsx(n.Button,Object.assign({},l,{isLoading:!1,buttonText:"",TrailingIcon:d.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}}))}))]}))};
|
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { IconButtonType } from '../icon-button/model';
|
|
1
|
+
import { Type } from '../button/model';
|
|
3
2
|
export declare const DropdownButtonStyle: import("styled-components").StyledComponent<"div", any, {
|
|
4
3
|
type: Type | undefined;
|
|
5
4
|
disabled: boolean | undefined;
|
|
6
|
-
isIconButton?: boolean | undefined;
|
|
7
|
-
iconButtonType?: IconButtonType | undefined;
|
|
8
|
-
iconButtonSize?: "default" | "xs" | undefined;
|
|
9
|
-
size?: Size | undefined;
|
|
10
5
|
}, never>;
|
|
11
6
|
export declare const LoaderContainer: import("styled-components").StyledComponent<"div", any, {
|
|
12
7
|
type: Type | undefined;
|
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e);const i=n.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: row;
|
|
4
4
|
width: max-content;
|
|
5
5
|
position: relative;
|
|
6
6
|
align-items: stretch;
|
|
7
|
-
${t=>{var r,n,i;return t.isIconButton&&`\n\t\tborder-radius: 4px;\n\t\tbackground: ${n=null!==(r=t.iconButtonType)&&void 0!==r?r:"primary",i=t.disabled,i?e.COLORS.background.inactive:"primary"===n?e.COLORS.background.inverseLight:"transparent"};\n\t\theight: ${"xs"===t.iconButtonSize?"24px":"32px"};\n\t\talign-items: center;\n\t`}}
|
|
8
|
-
${t=>("xs"===t.size||"xs"===t.iconButtonSize)&&`\n\t\theight: 24px;\n\t\talign-items: center;\n\t\tborder-radius: 4px;\n\t\t${!t.isIconButton&&t.type?`border: 1px solid ${t.disabled||"secondaryGray"===t.type?e.COLORS.stroke.primary:"secondary"===t.type?e.COLORS.stroke.brand:"transparent"};`:""}\n\t`}
|
|
9
7
|
.dd-button-divider {
|
|
10
|
-
width: ${
|
|
11
|
-
|
|
12
|
-
flex-shrink: 0;
|
|
13
|
-
background-color: ${t=>{return t.isIconButton?"rgba(255, 255, 255, 0.3)":"xs"===t.size?e.COLORS.stroke.primary:(r=t.type,(null==t?void 0:t.disabled)?e.COLORS.content.inactive:"primary"===r?"#CDA2FC":e.COLORS.content.primaryInverse);var r}};
|
|
8
|
+
width: ${e=>["primary","destructive"].includes(e.type)?"1px":"0px"};
|
|
9
|
+
background-color: ${e=>{return r=e.type,(null==e?void 0:e.disabled)?t.COLORS.content.inactive:"primary"===r?"#CDA2FC":t.COLORS.content.primaryInverse;var r}};
|
|
14
10
|
}
|
|
15
|
-
`,
|
|
11
|
+
`,d=n.default.div`
|
|
16
12
|
position: absolute;
|
|
17
13
|
inset: 0;
|
|
18
14
|
display: flex;
|
|
@@ -21,6 +17,6 @@
|
|
|
21
17
|
justify-content: center;
|
|
22
18
|
width: 100%;
|
|
23
19
|
border-radius: 4px;
|
|
24
|
-
background: ${
|
|
20
|
+
background: ${e=>(e=>{switch(e){case"destructive":return t.COLORS.background.negative.light;case"secondaryGray":return t.COLORS.surface.subdued;default:return t.COLORS.background.brandLight}})(e.type)};
|
|
25
21
|
z-index: 3;
|
|
26
|
-
`;exports.DropdownButtonStyle=i,exports.LoaderContainer=
|
|
22
|
+
`;exports.DropdownButtonStyle=i,exports.LoaderContainer=d;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useState as s,useCallback as l,useEffect as i}from"react";import{MenuItem as c}from"./MenuItem.js";import{StyledGroupedLabel as u
|
|
1
|
+
import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useState as s,useCallback as l,useEffect as i}from"react";import{MenuItem as c}from"./MenuItem.js";import{StyledGroupedLabel as u}from"./MenuList.styled.js";const a=r(((r,a)=>{let{options:d,isMultiSelect:p,showDescription:f,onSelect:m,version:g,onInfiniteScroll:h,onDropdownItemClick:D,useDefaultCursor:b,focusedIndex:v=-1,isDraggable:w=!1,onOptionsReorder:C,showCheckboxForCustomElement:I=!1}=r;const j=o(null),x=o(null),[S,E]=s(null),[O,k]=s(null),M=l((()=>{j.current&&j.current.disconnect(),j.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==h||h())})),x.current&&j.current.observe(x.current)}),[h]);i((()=>(M(),()=>{j.current&&j.current.disconnect()})),[M,d]);const y=l((e=>n=>{w&&(E(e),n.dataTransfer.effectAllowed="move")}),[w]),F=l((e=>n=>{w&&(n.preventDefault(),n.dataTransfer.dropEffect="move",k(e))}),[w]),T=l((e=>n=>{if(w&&null!==S){if(n.preventDefault(),S!==e){const n=[...d],[t]=n.splice(S,1);n.splice(e,0,t),null==C||C(n)}E(null),k(null)}}),[w,S,d,C]),R=l((()=>{E(null),k(null)}),[]),$=new Map;let A=-1;return d.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||(A++,$.set(e,A))}));else{const n=e;n.disabled||(A++,$.set(n,A))}})),e(n,{children:d.map(((n,r)=>{const o=r===d.length-1;if(n.options){const s=n;return t("div",Object.assign({style:{marginTop:"2.0"===g?2:0}},{children:[t(u,Object.assign({version:g},{children:[s.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:s.leadingIcon})):null,s.label]})),s.options.map(((n,t)=>{const o=$.get(n),l=o===v&&!n.disabled;return e(c,{version:g,last:t===s.options.length-1,onSelect:m,showDescription:f,onDropdownItemClick:D,isMultiSelect:p,option:n,useDefaultCursor:b,isFocused:l,dataIndex:o,isDraggable:!1,showCheckboxForCustomElement:I,ref:e=>{a&&"object"==typeof a&&a.current&&e&&e&&e&&e&&(a.current[r]=e)}},`${r}-${t}`)})),o?e("span",{ref:x}):null]}),r)}const s=n,l=$.get(s),i=l===v&&!s.disabled;return t("div",{children:[e(c,{version:g,last:o,onSelect:m,showDescription:f,onDropdownItemClick:D,isMultiSelect:p,option:s,useDefaultCursor:b,isFocused:i,dataIndex:l,isDraggable:w,onDragStart:y(r),onDragOver:F(r),onDrop:T(r),onDragEnd:R,isDraggedOver:O===r,showCheckboxForCustomElement:I,ref:e=>{a&&"object"==typeof a&&a.current&&e&&(a.current[r]=e)}},s.value),o?e("span",{ref:x}):null]},r)}))})}));export{a as MenuList};
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
import o from"styled-components";import{BodyCaption as r}from"../../../../TypographyStyle.js";import{COLORS as n}from"../../../../../constants/Theme.js";const e=o
|
|
2
|
-
height: 1px;
|
|
3
|
-
background-color: ${n.stroke.primary};
|
|
4
|
-
margin: 4px 8px;
|
|
5
|
-
`,t=o(r)`
|
|
1
|
+
import o from"styled-components";import{BodyCaption as r}from"../../../../TypographyStyle.js";import{COLORS as n}from"../../../../../constants/Theme.js";const e=o(r)`
|
|
6
2
|
padding: 8px ${o=>"2.0"===o.version?12:16}px;
|
|
7
3
|
color: ${o=>"2.0"===o.version?n.content.placeholder:n.content.secondary};
|
|
8
4
|
background-color: ${o=>"2.0"===o.version?n.surface.standard:n.background.base};
|
|
9
5
|
font-size: ${o=>"2.0"===o.version?10:12}px;
|
|
10
|
-
`;export{e as
|
|
6
|
+
`;export{e as StyledGroupedLabel};
|
|
@@ -80,7 +80,6 @@ export type SingleOption = {
|
|
|
80
80
|
children?: SingleOption[];
|
|
81
81
|
parent?: SingleOption;
|
|
82
82
|
'data-test'?: string;
|
|
83
|
-
hasDivider?: boolean;
|
|
84
83
|
};
|
|
85
84
|
export type MultiSelectOption = SingleOption;
|
|
86
85
|
export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownProps } from "../dropdown";
|
|
3
3
|
import { ButtonProps } from '../button/model';
|
|
4
|
-
import { IconButtonProps } from '../icon-button/model';
|
|
5
4
|
export interface DropdownButtonProps {
|
|
6
5
|
dropdownProps: DropdownProps;
|
|
6
|
+
buttonProps: ButtonProps;
|
|
7
7
|
iconProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
|
8
|
-
buttonProps?: ButtonProps;
|
|
9
|
-
iconButtonProps?: IconButtonProps;
|
|
10
8
|
}
|
|
11
9
|
export declare const DropdownButton: React.FC<DropdownButtonProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as o}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as n}from"react/jsx-runtime";import{DropdownPopover as
|
|
1
|
+
import{__rest as o}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as n}from"react/jsx-runtime";import{DropdownPopover as r}from"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"react";import"../zeroState/ZeroState.js";import"../../constants/Theme.js";import"lodash/debounce";import"../TypographyStyle.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import{Button as e}from"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import{SpinnerColorMap as p}from"../button/themes.js";import{Spinner as s}from"../spinner/Spinner.js";import{DropdownButtonStyle as i,LoaderContainer as d}from"./DropdownButton.style.js";const m=m=>{var u,a;const c=m.buttonProps,l=o(c,["onClick"]);return t(i,Object.assign({type:m.buttonProps.buttonType,disabled:m.buttonProps.disabled},{children:[(null===(u=m.buttonProps)||void 0===u?void 0:u.isLoading)&&n(d,Object.assign({type:m.buttonProps.buttonType},{children:n(s,{className:"spinner",size:"small",color:p(m.buttonProps.buttonType||"primary",m.buttonProps.inverse)})})),n(e,Object.assign({},m.buttonProps,{isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"}})),n("div",{className:"dd-button-divider"}),n(r,Object.assign({},m.dropdownProps,{isChildLoading:null===(a=m.buttonProps)||void 0===a?void 0:a.isLoading},{children:n(e,Object.assign({},l,{isLoading:!1,buttonText:"",TrailingIcon:m.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}}))}))]}))};export{m as DropdownButton};
|
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { IconButtonType } from '../icon-button/model';
|
|
1
|
+
import { Type } from '../button/model';
|
|
3
2
|
export declare const DropdownButtonStyle: import("styled-components").StyledComponent<"div", any, {
|
|
4
3
|
type: Type | undefined;
|
|
5
4
|
disabled: boolean | undefined;
|
|
6
|
-
isIconButton?: boolean | undefined;
|
|
7
|
-
iconButtonType?: IconButtonType | undefined;
|
|
8
|
-
iconButtonSize?: "default" | "xs" | undefined;
|
|
9
|
-
size?: Size | undefined;
|
|
10
5
|
}, never>;
|
|
11
6
|
export declare const LoaderContainer: import("styled-components").StyledComponent<"div", any, {
|
|
12
7
|
type: Type | undefined;
|
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const r=e.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: row;
|
|
4
4
|
width: max-content;
|
|
5
5
|
position: relative;
|
|
6
6
|
align-items: stretch;
|
|
7
|
-
${t=>{var n,r,i;return t.isIconButton&&`\n\t\tborder-radius: 4px;\n\t\tbackground: ${r=null!==(n=t.iconButtonType)&&void 0!==n?n:"primary",i=t.disabled,i?e.background.inactive:"primary"===r?e.background.inverseLight:"transparent"};\n\t\theight: ${"xs"===t.iconButtonSize?"24px":"32px"};\n\t\talign-items: center;\n\t`}}
|
|
8
|
-
${t=>("xs"===t.size||"xs"===t.iconButtonSize)&&`\n\t\theight: 24px;\n\t\talign-items: center;\n\t\tborder-radius: 4px;\n\t\t${!t.isIconButton&&t.type?`border: 1px solid ${t.disabled||"secondaryGray"===t.type?e.stroke.primary:"secondary"===t.type?e.stroke.brand:"transparent"};`:""}\n\t`}
|
|
9
7
|
.dd-button-divider {
|
|
10
|
-
width: ${
|
|
11
|
-
|
|
12
|
-
flex-shrink: 0;
|
|
13
|
-
background-color: ${t=>{return t.isIconButton?"rgba(255, 255, 255, 0.3)":"xs"===t.size?e.stroke.primary:(n=t.type,(null==t?void 0:t.disabled)?e.content.inactive:"primary"===n?"#CDA2FC":e.content.primaryInverse);var n}};
|
|
8
|
+
width: ${e=>["primary","destructive"].includes(e.type)?"1px":"0px"};
|
|
9
|
+
background-color: ${e=>{return r=e.type,(null==e?void 0:e.disabled)?t.content.inactive:"primary"===r?"#CDA2FC":t.content.primaryInverse;var r}};
|
|
14
10
|
}
|
|
15
|
-
`,
|
|
11
|
+
`,i=e.div`
|
|
16
12
|
position: absolute;
|
|
17
13
|
inset: 0;
|
|
18
14
|
display: flex;
|
|
@@ -21,6 +17,6 @@ import t from"styled-components";import{COLORS as e}from"../../constants/Theme.j
|
|
|
21
17
|
justify-content: center;
|
|
22
18
|
width: 100%;
|
|
23
19
|
border-radius: 4px;
|
|
24
|
-
background: ${
|
|
20
|
+
background: ${e=>(e=>{switch(e){case"destructive":return t.background.negative.light;case"secondaryGray":return t.surface.subdued;default:return t.background.brandLight}})(e.type)};
|
|
25
21
|
z-index: 3;
|
|
26
|
-
`;export{
|
|
22
|
+
`;export{r as DropdownButtonStyle,i as LoaderContainer};
|