@bikdotai/bik-component-library 0.0.799-beta.20 → 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-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-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,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,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};
|