@bikdotai/bik-component-library 0.0.552-beta.2 → 0.0.552-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/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/dropdown/ChipInput.d.ts +3 -2
- package/dist/cjs/components/dropdown/ChipInput.js +1 -1
- package/dist/cjs/components/dropdown/Dropdown.d.ts +2 -2
- package/dist/cjs/components/dropdown/Dropdown.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/dropdown/ChipInput.d.ts +3 -2
- package/dist/esm/components/dropdown/ChipInput.js +1 -1
- package/dist/esm/components/dropdown/Dropdown.d.ts +2 -2
- package/dist/esm/components/dropdown/Dropdown.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { SingleOption } from './type';
|
|
2
3
|
interface ChipInputProps {
|
|
3
|
-
chips:
|
|
4
|
-
onDeleteChip: (chip:
|
|
4
|
+
chips: SingleOption[];
|
|
5
|
+
onDeleteChip: (chip: SingleOption) => void;
|
|
5
6
|
containerStyle?: React.CSSProperties;
|
|
6
7
|
isDropdownOpened?: boolean;
|
|
7
8
|
sizeToUse?: 'default' | 'small';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),t=require("../../assets/icons/chevronDown.svg.js"),r=require("../../assets/icons/cross.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),t=require("../../assets/icons/chevronDown.svg.js"),r=require("../../assets/icons/cross.svg.js"),i=require("../tag/Tag.js"),l=require("../TypographyStyle.js"),n=require("./Common.styled.js");exports.default=a=>{let{chips:c,onDeleteChip:o,containerStyle:d={},sizeToUse:h="default",isDropdownOpened:j}=a;return e.jsxs(n.ChipInputWrapper,Object.assign({style:Object.assign({},d)},{children:[e.jsxs("div",Object.assign({className:"chips-container"},{children:[c.slice(0,2).map(((s,t)=>e.jsx("div",Object.assign({style:{zIndex:10}},{children:e.jsx(i.Tag,Object.assign({tagText:s.selectedLabel||s.label,TrailingIcon:()=>e.jsx(r.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{o(s)}})},{children:s.selectedLabel||s.label}))}),t))),c.length>2&&e.jsx(l.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:`+${c.length-2} more`})),0===c.length&&e.jsx(l.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:"Select.."}))]})),e.jsx("div",{children:e.jsx(t.default,{style:{transform:j?"rotate(180deg)":"rotate(0deg)"},width:"small"===h?20:24,height:"small"===h?20:24,color:s.COLORS.content.primary})})]}))};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { OpenDropdownProps } from './type';
|
|
2
|
+
import { OpenDropdownProps, SingleOption } from './type';
|
|
3
3
|
export type DropdownProps = OpenDropdownProps & {
|
|
4
4
|
placeHolder?: string;
|
|
5
5
|
size?: 'default' | 'small';
|
|
@@ -10,6 +10,6 @@ export type DropdownProps = OpenDropdownProps & {
|
|
|
10
10
|
showPlaceholderWhenSelected?: boolean;
|
|
11
11
|
inputStyle?: React.CSSProperties;
|
|
12
12
|
inputType?: 'chip' | 'default';
|
|
13
|
-
onDeleteChip?: (chip:
|
|
13
|
+
onDeleteChip?: (chip: SingleOption) => void;
|
|
14
14
|
};
|
|
15
15
|
export declare const Dropdown: React.FC<DropdownProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/chevronDown.svg.js"),r=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),d=require("./DropdownPopover/index.js"),u=require("./OpenedDropdown/utils/iterationOnOptions.js");function a(){}const p=p=>{var c,h,v,g,j,{placeHolder:f,size:w,onSelect:b,defaultOptions:x,disabled:y,noErrorHint:O,placeHolderHeight:S,showPlaceholderWhenSelected:D=!1,inputStyle:q={},inputType:C="default",onDeleteChip:H}=p,m=e.__rest(p,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[I,E]=n.useState(!1),P=null!=w?w:"default",T=n.useRef(),[_,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/chevronDown.svg.js"),r=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),d=require("./DropdownPopover/index.js"),u=require("./OpenedDropdown/utils/iterationOnOptions.js");function a(){}const p=p=>{var c,h,v,g,j,{placeHolder:f,size:w,onSelect:b,defaultOptions:x,disabled:y,noErrorHint:O,placeHolderHeight:S,showPlaceholderWhenSelected:D=!1,inputStyle:q={},inputType:C="default",onDeleteChip:H}=p,m=e.__rest(p,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[I,E]=n.useState(!1),P=null!=w?w:"default",T=n.useRef(),[_,z]=n.useState(null!=x?x:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==m?void 0:m.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),z([...t])}),[m.options]),n.useEffect((()=>{x&&z([...x])}),[x]);const W=u.getSelectedOptionsAsText(_);return t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign({height:S||("small"===P?32:48),width:null!==(h=null!==(c=m.buttonWidth)&&void 0!==c?c:m.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},q),input:{minHeight:"100%"}}},{children:t.jsxs(d.DropdownPopover,Object.assign({ref:T,onSelect:function(e){Array.isArray(e)?z([...e]):z([e]),null==b||b(e)},disabled:y,onDropdownVisbilityChange:e=>E(e)},m,{children:["default"==C&&t.jsx(r.Input,{version:m.version,noErrorHint:O,state:y?"disabled":"none",value:D?f:null!=W?W:"",errorMessage:m.error,variant:P,placeholder:null!=f?f:"Select an option",width:null!==(v=m.width)&&void 0!==v?v:"100%",onChangeText:a,rightIcon:{icon:()=>t.jsx(i.default,{style:{transform:I?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===P?20:24,height:"small"===P?20:24,color:o.COLORS.content.primary})},truncateText:!0}),"chip"==C&&t.jsx(s.default,{chips:_,onDeleteChip:e=>{null==H||H(e),console.log("onDeleteChip",e)},isDropdownOpened:I,sizeToUse:P,containerStyle:{width:null!==(g=m.width)&&void 0!==g?g:"100%",cursor:"pointer"},setDropdownVisibility:null===(j=null==T?void 0:T.current)||void 0===j?void 0:j.setDropdownVisibility})]}))}))};p.displayName="Dropdown",exports.Dropdown=p;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getSelectedOptionsAsText=function(t){if(t&&t.length)return t.map((t=>{var e;const n=t;return null!==(e=n.selectedLabel)&&void 0!==e?e:n.label})).join(", ")},exports.iterateOnOptions=function(t,e,n){return t.map((t=>{if(t.options){const s=t.options.map((t=>!n||n(t)?Object.assign(Object.assign({},t),e):Object.assign({},t)));return Object.assign(Object.assign({},t),{options:[...s]})}return!n||n(t)?Object.assign(Object.assign({},t),e):Object.assign({},t)}))},exports.iterateOnOptionsRaw=function(t,e){t.forEach((t=>{t.options?t.options.forEach(e):e(t)}))};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { SingleOption } from './type';
|
|
2
3
|
interface ChipInputProps {
|
|
3
|
-
chips:
|
|
4
|
-
onDeleteChip: (chip:
|
|
4
|
+
chips: SingleOption[];
|
|
5
|
+
onDeleteChip: (chip: SingleOption) => void;
|
|
5
6
|
containerStyle?: React.CSSProperties;
|
|
6
7
|
isDropdownOpened?: boolean;
|
|
7
8
|
sizeToUse?: 'default' | 'small';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{COLORS as s}from"../../constants/Theme.js";import o from"../../assets/icons/chevronDown.svg.js";import r from"../../assets/icons/cross.svg.js";import{Tag as n}from"../tag/Tag.js";import{BodyCaption as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{COLORS as s}from"../../constants/Theme.js";import o from"../../assets/icons/chevronDown.svg.js";import r from"../../assets/icons/cross.svg.js";import{Tag as n}from"../tag/Tag.js";import{BodyCaption as l}from"../TypographyStyle.js";import{ChipInputWrapper as i}from"./Common.styled.js";const c=c=>{let{chips:a,onDeleteChip:m,containerStyle:d={},sizeToUse:h="default",isDropdownOpened:g}=c;return e(i,Object.assign({style:Object.assign({},d)},{children:[e("div",Object.assign({className:"chips-container"},{children:[a.slice(0,2).map(((e,s)=>t("div",Object.assign({style:{zIndex:10}},{children:t(n,Object.assign({tagText:e.selectedLabel||e.label,TrailingIcon:()=>t(r,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{m(e)}})},{children:e.selectedLabel||e.label}))}),s))),a.length>2&&t(l,Object.assign({color:s.content.placeholder},{children:`+${a.length-2} more`})),0===a.length&&t(l,Object.assign({color:s.content.placeholder},{children:"Select.."}))]})),t("div",{children:t(o,{style:{transform:g?"rotate(180deg)":"rotate(0deg)"},width:"small"===h?20:24,height:"small"===h?20:24,color:s.content.primary})})]}))};export{c as default};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { OpenDropdownProps } from './type';
|
|
2
|
+
import { OpenDropdownProps, SingleOption } from './type';
|
|
3
3
|
export type DropdownProps = OpenDropdownProps & {
|
|
4
4
|
placeHolder?: string;
|
|
5
5
|
size?: 'default' | 'small';
|
|
@@ -10,6 +10,6 @@ export type DropdownProps = OpenDropdownProps & {
|
|
|
10
10
|
showPlaceholderWhenSelected?: boolean;
|
|
11
11
|
inputStyle?: React.CSSProperties;
|
|
12
12
|
inputType?: 'chip' | 'default';
|
|
13
|
-
onDeleteChip?: (chip:
|
|
13
|
+
onDeleteChip?: (chip: SingleOption) => void;
|
|
14
14
|
};
|
|
15
15
|
export declare const Dropdown: React.FC<DropdownProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useState as n,useRef as i,useEffect as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import s from"../../assets/icons/chevronDown.svg.js";import{Input as p}from"../input/Input.js";import{InputStyleContext as d}from"../input/context/InputStyleProvider.js";import a from"./ChipInput.js";import{DropdownPopover as c}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u
|
|
1
|
+
import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useState as n,useRef as i,useEffect as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import s from"../../assets/icons/chevronDown.svg.js";import{Input as p}from"../input/Input.js";import{InputStyleContext as d}from"../input/context/InputStyleProvider.js";import a from"./ChipInput.js";import{DropdownPopover as c}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function h(){}const m=m=>{var v,f,g,w,b,{placeHolder:j,size:y,onSelect:D,defaultOptions:O,disabled:H,noErrorHint:S,placeHolderHeight:x,showPlaceholderWhenSelected:C=!1,inputStyle:I={},inputType:T="default",onDeleteChip:E}=m,P=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[z,W]=n(!1),V=null!=y?y:"default",A=i(),[_,k]=n(null!=O?O:[]);r((()=>{var e;const o=[];null===(e=null==P?void 0:P.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),k([...o])}),[P.options]),r((()=>{O&&k([...O])}),[O]);const M=u(_);return o(d.Provider,Object.assign({value:{InputWrapper:Object.assign({height:x||("small"===V?32:48),width:null!==(f=null!==(v=P.buttonWidth)&&void 0!==v?v:P.width)&&void 0!==f?f:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},I),input:{minHeight:"100%"}}},{children:t(c,Object.assign({ref:A,onSelect:function(e){Array.isArray(e)?k([...e]):k([e]),null==D||D(e)},disabled:H,onDropdownVisbilityChange:e=>W(e)},P,{children:["default"==T&&o(p,{version:P.version,noErrorHint:S,state:H?"disabled":"none",value:C?j:null!=M?M:"",errorMessage:P.error,variant:V,placeholder:null!=j?j:"Select an option",width:null!==(g=P.width)&&void 0!==g?g:"100%",onChangeText:h,rightIcon:{icon:()=>o(s,{style:{transform:z?"rotate(180deg)":"rotate(0deg)"},onClick:h,width:"small"===V?20:24,height:"small"===V?20:24,color:l.content.primary})},truncateText:!0}),"chip"==T&&o(a,{chips:_,onDeleteChip:e=>{null==E||E(e),console.log("onDeleteChip",e)},isDropdownOpened:z,sizeToUse:V,containerStyle:{width:null!==(w=P.width)&&void 0!==w?w:"100%",cursor:"pointer"},setDropdownVisibility:null===(b=null==A?void 0:A.current)||void 0===b?void 0:b.setDropdownVisibility})]}))}))};m.displayName="Dropdown";export{m as Dropdown};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function n(n,t,
|
|
1
|
+
function n(n,t,s){return n.map((n=>{if(n.options){const e=n.options.map((n=>!s||s(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)));return Object.assign(Object.assign({},n),{options:[...e]})}return!s||s(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)}))}function t(n,t){n.forEach((n=>{n.options?n.options.forEach(t):t(n)}))}function s(n){if(n&&n.length)return n.map((n=>{var t;const s=n;return null!==(t=s.selectedLabel)&&void 0!==t?t:s.label})).join(", ")}export{s as getSelectedOptionsAsText,n as iterateOnOptions,t as iterateOnOptionsRaw};
|