moved from Partial<> to declaring optional props... solved the proble…

…m of Variables being evaluated at TS compile time during packaging, ergo: Variables are now globally working. Also fixes jetbrains issue

src/base/helpers/badge.ts

@@ -8,13 +8,13 @@ import {
 } from "./factory";
 import { DEFAULTS, Variables } from "./variables";
 
-export type BadgeHelpersProps = Partial<{
-  badge: number | string;
-  badgeColor: Variables["colors"];
-  badgeOutlined: boolean;
-  badgeRounded: boolean;
-  badgeSize: (typeof DEFAULTS["badgeSizes"])[number];
-}>;
+export type BadgeHelpersProps = {
+  badge?: number | string;
+  badgeColor?: Variables["colors"];
+  badgeOutlined?: boolean;
+  badgeRounded?: boolean;
+  badgeSize?: (typeof DEFAULTS["badgeSizes"])[number];
+};
 
 // Factories
 export const makePropTypes = makePropTypesFactory(vars => ({

src/base/helpers/float.ts

@@ -8,12 +8,12 @@ import {
 } from "./factory";
 import { Variables } from "./variables";
 
-export type FloatHelpersProps = Partial<{
+export type FloatHelpersProps = {
   /** Fixes an element's floating children */
-  clearfix: boolean;
+  clearfix?: boolean;
   /** Moves an element to the left or right */
-  pull: Variables["floatPulledAlignments"];
-}>;
+  pull?: Variables["floatPulledAlignments"];
+};
 
 // Factories
 export const makePropTypes = makePropTypesFactory(vars => ({

src/base/helpers/other.ts

@@ -7,20 +7,20 @@ import {
   TransformFunction,
 } from "./factory";
 
-export type OtherHelpersProps = Partial<{
+export type OtherHelpersProps = {
   /** Removes any margin */
-  marginless: boolean;
+  marginless?: boolean;
   /** Removes any padding */
-  paddingless: boolean;
+  paddingless?: boolean;
   /** Removes any radius */
-  radiusless: boolean;
-  /** Applies position: relative to the element */
-  relative: boolean;
+  radiusless?: boolean;
+  /** Applies position?: relative to the element */
+  relative?: boolean;
   /** Removes any shadow */
-  shadowless: boolean;
+  shadowless?: boolean;
   /** Prevents the text from being selectable */
-  unselectable: boolean;
-}>;
+  unselectable?: boolean;
+};
 
 // Factories
 export const makePropTypes = makePropTypesFactory(vars => ({

src/base/helpers/overflow.ts

@@ -7,10 +7,10 @@ import {
   TransformFunction,
 } from "./factory";
 
-export type OverflowHelpersProps = Partial<{
+export type OverflowHelpersProps = {
   /** Adds overflow hidden */
-  clipped: boolean;
-}>;
+  clipped?: boolean;
+};
 
 // Factories
 export const makePropTypes = makePropTypesFactory(vars => ({

src/base/helpers/overlay.ts

@@ -7,10 +7,10 @@ import {
   TransformFunction,
 } from "./factory";
 
-export type OverlayHelpersProps = Partial<{
+export type OverlayHelpersProps = {
   /** Completely covers the first positioned parent */
-  overlay: boolean;
-}>;
+  overlay?: boolean;
+};
 
 // Factories
 export const makePropTypes = makePropTypesFactory(vars => ({

src/base/helpers/responsive.ts

@@ -8,53 +8,51 @@ import {
 } from "./factory";
 import { Variables } from "./variables";
 
-export type LimitedResponsiveBreakpointProps = Partial<{
-  display: {
+export type LimitedResponsiveBreakpointProps = {
+  display?: {
     value: Variables["displays"];
   };
-  hide: {
+  hide?: {
     value: boolean;
   };
-  textAlign: {
+  textAlign?: {
     value: Variables["textAlignments"];
   };
-  textSize: {
+  textSize?: {
     value: Variables["textSizes"];
   };
-}>;
+};
 
-export type ResponsiveBreakpointProps = Partial<{
-  display: {
+export type ResponsiveBreakpointProps = {
+  display?: {
     only?: boolean;
     value: Variables["displays"];
   };
-  hide: {
+  hide?: {
     only?: boolean;
     value: boolean;
   };
-  textAlign: {
+  textAlign?: {
     only?: boolean;
     value: Variables["textAlignments"];
   };
-  textSize: {
+  textSize?: {
     only?: boolean;
     value: Variables["textSizes"];
   };
-}>;
+};
 
-export type ResponsiveHelpersProps = Partial<{
-  responsive: Partial<
+export type ResponsiveHelpersProps = {
+  responsive?: {
+    [B in Variables["breakpointsLimited"]]?: LimitedResponsiveBreakpointProps;
+  } &
     {
-      [B in Variables["breakpointsLimited"]]: LimitedResponsiveBreakpointProps;
-    } &
-      {
-        [B in Exclude<
-          Variables["breakpoints"],
-          Variables["breakpointsLimited"]
-        >]: ResponsiveBreakpointProps;
-      }
-  >;
-}>;
+      [B in Exclude<
+        Variables["breakpoints"],
+        Variables["breakpointsLimited"]
+      >]?: ResponsiveBreakpointProps;
+    };
+};
 
 export const makeResponsiveBreakpointPropTypes = makePropTypesFactory(vars => ({
   display: PropTypes.shape({

src/base/helpers/tooltip.ts

@@ -8,16 +8,16 @@ import {
 } from "./factory";
 import { DEFAULTS, Variables } from "./variables";
 
-export type TooltipHelpersProps = Partial<{
-  tooltip: number | string;
-  tooltipActive: boolean;
-  tooltipColor: Variables["colors"];
-  tooltipMultiline: boolean;
-  tooltipPosition: (typeof DEFAULTS["tooltipPositions"])[number];
-  tooltipResponsive: {
+export type TooltipHelpersProps = {
+  tooltip?: number | string;
+  tooltipActive?: boolean;
+  tooltipColor?: Variables["colors"];
+  tooltipMultiline?: boolean;
+  tooltipPosition?: (typeof DEFAULTS["tooltipPositions"])[number];
+  tooltipResponsive?: {
     [K in Variables["breakpoints"]]?: (typeof DEFAULTS["tooltipPositions"])[number];
   };
-}>;
+};
 
 // Factories
 export const makePropTypes = makePropTypesFactory(vars => ({

src/base/helpers/typography.ts

@@ -8,15 +8,15 @@ import {
 } from "./factory";
 import { Variables } from "./variables";
 
-export type TypographyHelpersProps = Partial<{
-  backgroundColor: Variables["colors"] | Variables["shades"];
-  italic: boolean;
-  textAlign: Variables["textAlignments"];
-  textColor: Variables["colors"] | Variables["shades"];
-  textSize: Variables["textSizes"];
-  textTransform: Variables["textTransforms"];
-  textWeight: Variables["textWeights"];
-}>;
+export type TypographyHelpersProps = {
+  backgroundColor?: Variables["colors"] | Variables["shades"];
+  italic?: boolean;
+  textAlign?: Variables["textAlignments"];
+  textColor?: Variables["colors"] | Variables["shades"];
+  textSize?: Variables["textSizes"];
+  textTransform?: Variables["textTransforms"];
+  textWeight?: Variables["textWeights"];
+};
 
 // Factories
 export const makePropTypes = makePropTypesFactory(vars => ({

src/base/helpers/visibility.ts

@@ -7,17 +7,17 @@ import {
   TransformFunction,
 } from "./factory";
 
-export type VisibilityHelpersProps = Partial<{
+export type VisibilityHelpersProps = {
   /** Hides an element (unclear on where this is documented in Bulma) */
-  hidden: boolean;
+  hidden?: boolean;
   /** Adds visibility hidden */
-  invisible: boolean;
+  invisible?: boolean;
   /**
    * Hide elements visually but keep the element available to be announced by a
    * screen reader
    */
-  srOnly: boolean;
-}>;
+  srOnly?: boolean;
+};
 
 // Factories
 export const makePropTypes = makePropTypesFactory(vars => ({

src/components/breadcrumb/breadcrumb.tsx

@@ -26,11 +26,11 @@ export type BreadcrumbVariables = Prefer<
   BreadcrumbVariablesDefaults
 >;
 
-export type BreadcrumbModifierProps = Partial<{
-  align: BreadcrumbVariables["alignments"];
-  separator: BreadcrumbVariables["separators"];
-  size: BreadcrumbVariables["sizes"];
-}>;
+export type BreadcrumbModifierProps = {
+  align?: BreadcrumbVariables["alignments"];
+  separator?: BreadcrumbVariables["separators"];
+  size?: BreadcrumbVariables["sizes"];
+};
 
 export type BreadcrumbProps = HelpersProps & BreadcrumbModifierProps;
 

src/components/card/card-header-title.tsx

@@ -21,9 +21,9 @@ export type CardHeaderTitleVariables = Prefer<
   CardHeaderTitleVariablesDefaults
 >;
 
-export type CardHeaderTitleModifierProps = Partial<{
-  align: CardHeaderTitleVariables["alignments"];
-}>;
+export type CardHeaderTitleModifierProps = {
+  align?: CardHeaderTitleVariables["alignments"];
+};
 
 export type CardHeaderTitleProps = HelpersProps & CardHeaderTitleModifierProps;
 

src/components/dropdown/dropdown-container.tsx

@@ -22,15 +22,15 @@ export type DropdownVariables = Prefer<
   DropdownVariablesDefaults
 >;
 
-export type DropdownContainerModifierProps = Partial<{
-  active: boolean;
-  align: DropdownVariables["alignments"];
-  as: React.ReactType; // tslint:disable-line:no-reserved-keywords
-  hoverable: boolean;
-  innerRef: React.Ref<HTMLElement | SVGElement | React.ComponentType>;
-  managed: boolean;
-  up: boolean;
-}>;
+export type DropdownContainerModifierProps = {
+  active?: boolean;
+  align?: DropdownVariables["alignments"];
+  as?: React.ReactType; // tslint:disable-line:no-reserved-keywords
+  hoverable?: boolean;
+  innerRef?: React.Ref<HTMLElement | SVGElement | React.ComponentType>;
+  managed?: boolean;
+  up?: boolean;
+};
 
 export type DropdownContainerProps = HelpersProps &
   DropdownContainerModifierProps;

src/components/dropdown/dropdown-item.tsx

@@ -6,10 +6,10 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { DropdownContext, DropdownContextValue } from "./dropdown-context";
 
-export type DropdownItemModifierProps = Partial<{
-  active: boolean;
-  onClick: React.MouseEventHandler;
-}>;
+export type DropdownItemModifierProps = {
+  active?: boolean;
+  onClick?: React.MouseEventHandler;
+};
 
 export type DropdownItemProps = HelpersProps & DropdownItemModifierProps;
 

src/components/dropdown/dropdown-trigger.tsx

@@ -6,9 +6,9 @@ import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 import { DropdownContext, DropdownContextValue } from "./dropdown-context";
 
-export type DropdownTriggerModifierProps = Partial<{
-  onClick: React.MouseEventHandler;
-}>;
+export type DropdownTriggerModifierProps = {
+  onClick?: React.MouseEventHandler;
+};
 
 export type DropdownTriggerProps = HelpersProps & DropdownTriggerModifierProps;
 

src/components/level/level-item.tsx

@@ -21,9 +21,9 @@ export type LevelItemVariables = Prefer<
   LevelItemVariablesDefaults
 >;
 
-export type LevelItemModifierProps = Partial<{
-  align: LevelItemVariables["alignments"];
-}>;
+export type LevelItemModifierProps = {
+  align?: LevelItemVariables["alignments"];
+};
 
 export type LevelItemProps = HelpersProps & LevelItemModifierProps;
 

src/components/level/level.tsx

@@ -7,9 +7,9 @@ import { HelpersProps } from "../../base/helpers";
 import { Variables } from "../../base/helpers/variables";
 import { LevelItem } from "./level-item";
 
-export type LevelModifierProps = Partial<{
-  breakpoint: Variables["breakpoints"];
-}>;
+export type LevelModifierProps = {
+  breakpoint?: Variables["breakpoints"];
+};
 
 export type LevelProps = HelpersProps & LevelModifierProps;
 

src/components/list/list-item.tsx

@@ -5,9 +5,9 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 
-export type ListItemModifierProps = Partial<{
-  active: boolean;
-}>;
+export type ListItemModifierProps = {
+  active?: boolean;
+};
 
 export type ListItemProps = HelpersProps & ListItemModifierProps;
 

src/components/media/media-item.tsx

@@ -21,9 +21,9 @@ export type MediaItemVariables = Prefer<
   MediaItemVariablesDefaults
 >;
 
-export type MediaItemModifierProps = Partial<{
-  align: MediaItemVariables["alignments"];
-}>;
+export type MediaItemModifierProps = {
+  align?: MediaItemVariables["alignments"];
+};
 
 export type MediaItemProps = HelpersProps & MediaItemModifierProps;
 

src/components/menu/menu-list-item.tsx

@@ -5,10 +5,10 @@ import React from "react";
 import { forwardRefAs, Generic } from "../../base";
 import { HelpersProps } from "../../base/helpers";
 
-export type MenuListItemModifierProps = Partial<{
-  active: boolean;
-  menu: React.ReactNode;
-}>;
+export type MenuListItemModifierProps = {
+  active?: boolean;
+  menu?: React.ReactNode;
+};
 
 export type MenuListItemProps = HelpersProps & MenuListItemModifierProps;