@edvisor/product-language 0.5.3 → 0.5.4

package/index.js

@@ -2278,37 +2278,6 @@ $$a({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR }, {
   }
 });
 
-const Nothing = () => null;
-function maybeRender(prop, JSX) {
-  return isDefined(prop) && Boolean(prop) ? JSX : jsx(Nothing, {});
-}
-const If = props => {
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return maybeRender(props.is, jsx(Fragment, {
-    children: props.children
-  }));
-};
-
-/**
- * @TODO these aren't quiiiiite right
- *
- * They all say they return ReactNode but I feel like JSX.Element or something
- * is more accurate? The child type needs to include _anything react can render_
- * but it should also allow the caller to cloneElement on the results so that
- * they can do stuff like
- *
- * const sections = getSlots(Section, children)
- *  .map((el, i) => i === 0 ? cloneElement(el, { first: true }) : el)
- *
- * Right? I want this...
- * */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-function isReactElement(obj) {
-  // eslint-disable-next-line no-prototype-builtins
-  return isDefined(obj) && obj.hasOwnProperty('type');
-}
-
 const isReactElementOfType = ( // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
 component) => // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
 element => {
@@ -2338,7 +2307,41 @@ element => {
   }
 
   return false;
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+};
+
+const Nothing = () => null; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const isNothing = isReactElementOfType(Nothing);
+function maybeRender(prop, JSX) {
+  return isNil(prop) || false === Boolean(prop) || isNothing(prop) ? jsx(Nothing, {}) : JSX;
+}
+const If = props => {
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return maybeRender(props.is, jsx(Fragment, {
+    children: props.children
+  }));
+};
+
+/**
+ * @TODO these aren't quiiiiite right
+ *
+ * They all say they return ReactNode but I feel like JSX.Element or something
+ * is more accurate? The child type needs to include _anything react can render_
+ * but it should also allow the caller to cloneElement on the results so that
+ * they can do stuff like
+ *
+ * const sections = getSlots(Section, children)
+ *  .map((el, i) => i === 0 ? cloneElement(el, { first: true }) : el)
+ *
+ * Right? I want this...
+ * */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+function isReactElement(obj) {
+  // eslint-disable-next-line no-prototype-builtins
+  return isDefined(obj) && obj.hasOwnProperty('type');
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
 const isSlotOfType = type => obj => {
   return isDefined(obj) && isReactElement(obj) && isDefined(obj.type) && (Object.getPrototypeOf(obj.type) === type || obj.type === type) || isDefined(obj.type) && isDefined(obj.type.target) && (Object.getPrototypeOf(obj.type.target) === type || obj.type.target === type);
@@ -4018,7 +4021,7 @@ function getBorderColor(props) {
 const CardFrame$1 = /*#__PURE__*/styled.section.withConfig({
   displayName: "card-frame__CardFrame",
   componentId: "l58n4z-0"
-})(["background:", ";max-width:1024px;border-radius:6px;margin-bottom:", ";"], Surface.Default.Default, Margin.m);
+})(["background:", ";border-radius:6px;margin-bottom:", ";"], Surface.Default.Default, Margin.m);
 
 const InCardFrame = /*#__PURE__*/styled(CardFrame$1).attrs({
   as: 'div'
@@ -6065,7 +6068,7 @@ const InputLayout = /*#__PURE__*/styled(Flex).withConfig({
 const HTMLInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "input-field__HTMLInput",
   componentId: "sc-1yq0rb7-2"
-})(["all:unset;padding:", " ", " ", " ", ";width:100%;::-webkit-inner-spin-button{-webkit-appearance:none;margin:", ";}", "::placeholder{", "}"], Padding.none, Padding.none, Padding.xs, Padding.none, Margin.none, Typography.Body, _Typography.LightText);
+})(["all:unset;cursor:auto;padding:", " ", " ", " ", ";width:100%;::-webkit-inner-spin-button{-webkit-appearance:none;margin:", ";}", "::placeholder{", "}"], Padding.none, Padding.none, Padding.xs, Padding.none, Margin.none, Typography.Body, _Typography.LightText);
 const PrefixFrame = /*#__PURE__*/styled(Label).withConfig({
   displayName: "input-field__PrefixFrame",
   componentId: "sc-1yq0rb7-3"
@@ -6083,10 +6086,13 @@ const InputFrame = /*#__PURE__*/styled.label.withConfig({
   displayName: "input-field__InputFrame",
   componentId: "sc-1yq0rb7-5"
 })(["width:100%;padding:", " ", " ", " ", ";flex-direction:column;display:flex;"], Padding.xs, Padding.none, Padding.none, Padding.none);
-const ControlsFrame = Flex;
+const ControlsFrame = /*#__PURE__*/styled(Flex).withConfig({
+  displayName: "input-field__ControlsFrame",
+  componentId: "sc-1yq0rb7-6"
+})(["margin-right:", ";"], Margin.s);
 const InputLabel = /*#__PURE__*/styled(Label).withConfig({
   displayName: "input-field__InputLabel",
-  componentId: "sc-1yq0rb7-6"
+  componentId: "sc-1yq0rb7-7"
 })(["margin-bottom:", ";"], Margin.xxs);
 const InputField = forwardRef((props, ref) => {
   const {
@@ -6094,16 +6100,18 @@ const InputField = forwardRef((props, ref) => {
     prefix,
     suffix,
     label,
-    className
+    className,
+    style
   } = props,
-        inputProps = __rest(props, ["children", "prefix", "suffix", "label", "className"]);
+        inputProps = __rest(props, ["children", "prefix", "suffix", "label", "className", "style"]);
 
   const icon = getSlot(IconSlot, children);
   const controls = getSlot(ControlsSlot, children);
   const required = is(props.required) ? '*' : '';
   return jsxs(FancyBorder, Object.assign({
     invalid: props.invalid,
-    className: className
+    className: className,
+    style: style
   }, {
     children: [jsxs(InputFrame, {
       children: [jsx(If, Object.assign({
@@ -6116,7 +6124,7 @@ const InputField = forwardRef((props, ref) => {
           children: [label, required]
         }))
       })), jsxs(InputLayout, {
-        children: [icon, jsx(If, Object.assign({
+        children: [jsx(If, Object.assign({
           is: prefix
         }, {
           children: jsx(PrefixFrame, Object.assign({
@@ -6138,10 +6146,22 @@ const InputField = forwardRef((props, ref) => {
           }))
         }))]
       })]
-    }), jsx(ControlsFrame, Object.assign({
-      center: true
+    }), jsx(If, Object.assign({
+      is: icon
     }, {
-      children: controls
+      children: jsx(ControlsFrame, Object.assign({
+        center: true
+      }, {
+        children: icon
+      }))
+    })), jsx(If, Object.assign({
+      is: controls
+    }, {
+      children: jsx(ControlsFrame, Object.assign({
+        center: true
+      }, {
+        children: controls
+      }))
     }))]
   }));
 });
@@ -6457,15 +6477,15 @@ function getValuesBySize$2(props) {
 const Box = /*#__PURE__*/styled(SpaceAround).withConfig({
   displayName: "thumbnail__Box",
   componentId: "sc-1pn53g7-0"
-})(["width:", ";height:", ";border-radius:6px;border:1px solid ", ";padding:", ";box-sizing:border-box;"], ({
+})(["width:", ";height:", ";border-radius:6px;border:1px solid ", ";box-sizing:border-box;"], ({
   size
 }) => size, ({
   size
-}) => size, Borders.Default, Padding.xs);
+}) => size, Borders.Default.Subdued);
 const Image$1 = /*#__PURE__*/styled.img.withConfig({
   displayName: "thumbnail__Image",
   componentId: "sc-1pn53g7-1"
-})(["width:100%;height:100%;"]);
+})(["width:100%;object-fit:contain;"]);
 const Thumbnail = props => {
   const {
     imageUrl,
@@ -6483,10 +6503,14 @@ const Thumbnail = props => {
     "data-testid": "thumbnail-test",
     className: className
   }, {
-    children: jsx(Image$1, {
-      src: imageUrl,
-      alt: imageLabel
-    })
+    children: jsx(If, Object.assign({
+      is: imageUrl
+    }, {
+      children: jsx(Image$1, {
+        src: imageUrl,
+        alt: imageLabel
+      })
+    }))
   }));
 };
 
@@ -8805,6 +8829,7 @@ const SelectImpl = (props, selectRef) => {
   const [focused, setFocused] = useState(false);
   const {
     className,
+    style,
     clearable,
     placeholder,
     value,
@@ -9029,9 +9054,9 @@ const SelectImpl = (props, selectRef) => {
   */
 
   return jsxs("div", Object.assign({
-    style: ContainerStyles({
+    style: Object.assign(Object.assign({}, style), ContainerStyles({
       disabled
-    }),
+    })),
     ref: selectRef,
     className: classNames.join(' '),
     onKeyUp: onKeyUp,
@@ -9977,4 +10002,4 @@ const MultiChoiceList = props => {
   }));
 };
 
-export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, Center, Checkbox, Display, Divider, Flag, Flex, Focused, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField, InputNumber, InputText, Interactive, LABEL, Label, LeftRightCard, Link, Margin, MenuList, MultiChoiceList, Padding, Select, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, TreeView, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };
+export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, CardFrame$1 as CardFrame, Center, Checkbox, Display, Divider, Flag, Flex, Focused, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField, InputNumber, InputText, Interactive, LABEL, Label, LeftRightCard, Link, Margin, MenuList, MultiChoiceList, Padding, Select, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, TreeView, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };

package/lib/components/card/index.d.ts

@@ -1,2 +1,3 @@
 export * from './card';
 export * from './molecules/left-right-card';
+export * from './atoms';

package/lib/components/select/types.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
 import { FC } from '@helpers';
+import { CSSProperties } from 'react';
 export interface ISelectProps<T = any> {
     className?: string;
+    style?: CSSProperties;
     options?: IOption<T>[];
     value?: T | T[];
     placeholder?: string;

package/lib/helpers/index.d.ts

@@ -4,3 +4,4 @@ export * from './generic-types';
 export * from './numbers';
 export * from './nothing';
 export * from './strings';
+export * from './isReactElementOfType';

package/lib/helpers/isReactElementOfType.d.ts

@@ -0,0 +1,8 @@
+import { PureComponent, ReactElement } from 'react';
+import { StyledComponent } from 'styled-components';
+import { FC } from './generic-types';
+export declare const isReactElementOfType: <P extends {
+    children?: import("react").ReactNode;
+}>(component: (FC<P, {}> | typeof PureComponent | StyledComponent<FC<P, {}>, any, {}, never>) & {
+    target?: any;
+}) => (element?: any) => element is ReactElement<P, string | import("react").JSXElementConstructor<any>>;

package/lib/helpers/nothing.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import { FC, PropsWithChildren } from './generic-types';
 export declare const Nothing: FC;
+export declare const isNothing: (element?: any) => element is import("react").ReactElement<{}, string | import("react").JSXElementConstructor<any>>;
 export declare function maybeRender<T>(prop: T, JSX: JSX.Element): JSX.Element;
 interface IIfProps {
     is: unknown;

package/lib/helpers/slots.d.ts

@@ -1,11 +1,5 @@
 import { CSSProperties, PureComponent, ReactElement, ReactNode } from 'react';
-import { StyledComponent } from 'styled-components';
 import { FC, PropsWithChildren } from './generic-types';
-export declare const isReactElementOfType: <P extends {
-    children?: ReactNode;
-}>(component: (FC<P, {}> | typeof Slot | StyledComponent<FC<P, {}>, any, {}, never>) & {
-    target?: any;
-}) => (element?: any) => element is ReactElement<P, string | import("react").JSXElementConstructor<any>>;
 export declare const isSlotOfType: <T extends typeof Slot>(type: T | FC<{}, {}>) => (obj?: any) => obj is T;
 export declare class Slot<T = unknown> extends PureComponent<PropsWithChildren<T>> {
     render(): PropsWithChildren<T>["children"] | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",