@hyphen/hyphen-components 7.3.3 → 7.3.5

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import React__default, { ReactNode, Key, MouseEvent, KeyboardEvent, CSSProperties, FC, ButtonHTMLAttributes, RefObject, ChangeEvent, FocusEvent, HTMLProps, ForwardRefExoticComponent, InputHTMLAttributes, useEffect } from 'react';
+import React__default, { ReactNode, Key, MouseEvent, KeyboardEvent, CSSProperties, FC, ButtonHTMLAttributes, RefObject, ChangeEvent, FocusEvent, HTMLProps, ForwardRefExoticComponent, InputHTMLAttributes, useEffect, AnchorHTMLAttributes } from 'react';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
-import { BreakpointSize, SpacingSize, WidthSize, HeightSize, BorderRadiusSize as BorderRadiusSize$1, BackgroundColor, BorderColor, BorderSize, FontColor, FontFamily, FontSize, FontWeight, BoxShadowSize, TextTransform, TextWrap, ZIndexSize, IconName, HeadingSize } from '@hyphen/hyphen-design-tokens/build/types';
+import { BorderRadiusSize as BorderRadiusSize$1, BreakpointSize, SpacingSize, WidthSize, HeightSize, BackgroundColor, BorderColor, BorderSize, FontColor, FontFamily, FontSize, FontWeight, BoxShadowSize, TextTransform, TextWrap, ZIndexSize, IconName, HeadingSize, ColorName, BaseColor, LineHeightSize } from '@hyphen/hyphen-design-tokens/build/types';
+export { BackgroundColor, BaseColor, BorderColor, BorderSize, BoxShadowSize, BreakpointSize, ColorName, FontColor, FontFamily, FontSize, FontWeight, HeadingSize, HeightSize, IconName, LineHeightSize, SpacingSize, TextDecorationLine, TextDecorationStyle, TextTransform, TextWrap, WhiteSpace, WidthSize, WordBreak, ZIndexSize } from '@hyphen/hyphen-design-tokens/build/types';
 import * as CSS from 'csstype';
 import { DayPickerProps } from 'react-day-picker';
 export { Matcher } from 'react-day-picker';
@@ -24,8 +25,20 @@ type DimensionSize = WidthSize | HeightSize;
 type UnknownPropertiesObjType = {
     [key: string]: any;
 };
+interface FlexProperty {
+    flexGrow?: number | string;
+    flexShrink?: number | string;
+    flexBasis?: number | string;
+    flex?: number | string;
+}
+type StylesAndClasses<T> = {
+    styles?: T;
+    classes?: string[];
+};
+type CssDimensionAbbreviation = 'h' | 'w' | 'mw' | 'mh' | 'minw' | 'minh';
 type CssDimensionUnit = 'px' | 'rem' | 'em' | '%';
 type CssDimensionValue = `${number}${CssDimensionUnit}`;
+type CssSpacingAbbreviation = 'm' | 'p';
 type CssJustifyContentValue = 'space-around' | 'space-between' | 'center' | 'flex-end' | 'space-evenly' | 'flex-start' | 'stretch';
 type CssAlignContentValue = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
 type CssFlexDirectionValue = 'column' | 'column-reverse' | 'row' | 'row-reverse' | undefined;
@@ -2690,4 +2703,97 @@ interface HookWindowSize {
 }
 declare const useWindowSize: () => HookWindowSize;
 
-export { Alert, type AlertProps, AspectRatio, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BaseButtonProps, Box, type BoxProps, type BreakpointState, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, CardBaseComponent, type CardProps, type CardStatic, type CardWithStaticComponents, Checkbox, CheckboxInput, type CheckboxInputProps, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, CollapsibleTrigger, Details, DetailsBaseComponent, type DetailsProps, type DetailsStatic, DetailsSummary, type DetailsSummaryProps, type DetailsWithStaticComponents, Drawer, DrawerCloseButton, DrawerContent, DrawerHeader, type DrawerPlacementType, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedToastOptions, FormControl, type FormControlProps, FormLabel, type FormLabelProps, FormikCheckboxInput, type FormikCheckboxInputProps, FormikRadioGroup, type FormikRadioGroupProps, FormikSelectInput, FormikSelectInputInset, type FormikSelectInputInsetProps, FormikSelectInputNative, type FormikSelectInputNativeProps, type FormikSelectInputProps, FormikSwitch, type FormikSwitchProps, FormikTextInput, FormikTextInputInset, type FormikTextInputInsetProps, type FormikTextInputProps, FormikTextareaInput, FormikTextareaInputInset, type FormikTextareaInputInsetProps, type FormikTextareaInputProps, FormikTimePicker, FormikTimePickerNative, type FormikTimePickerNativeProps, type FormikTimePickerProps, FormikToggleGroup, FormikToggleGroupMulti, type FormikToggleGroupMultiProps, type FormikToggleGroupProps, Heading, type HeadingProps, type HookWindowSize, type HoverableBoxProperties, Icon, type IconProps, type InputRangeProps, Modal, ModalBaseComponent, type ModalProps, type ModalStatic, type ModalWithStaticComponents, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverPortal, PopoverTrigger, RadioGroup, type RadioGroupProps, RangeInput, ResponsiveContext, type ResponsiveContextShape, ResponsiveProvider, type ResponsiveProviderProps, SelectInput, SelectInputInset, type SelectInputInsetProps, type SelectInputInsetSize, SelectInputNative, type SelectInputNativeOption, type SelectInputNativeProps, type SelectInputNativeSize, type SelectInputOptions, type SelectInputProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, type SimulatedEventPayloadType, Spinner, type SpinnerProps, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, TextInput, TextInputInset, type TextInputInsetProps, type TextInputInsetSize, type TextInputProps, type TextInputSize, type TextInputSizeType, TextareaInput, TextareaInputInset, type TextareaInputInsetProps, type TextareaInputInsetSize, type TextareaInputProps, type TextareaInputSize, type Theme, ThemeProvider, ThemeProviderContext, TimePicker, TimePickerNative, type TimePickerNativeProps, type TimePickerProps, type Toast, ToastContainer, type ToastContainerProps, type ToastOptions, type ToastPosition, type ToastType, Toggle, ToggleGroup, ToggleGroupItem, type ToggleVariant$1 as ToggleVariant, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, type UseOpenCloseProps, type UseOpenCloseState, boxPropsKeys, createRectRef, toast, useBreakpoint, useDrawer, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };
+declare function isValidSpacingValue(value?: string | ResponsiveProp<string | undefined>): boolean;
+declare function generateBaseClasses(attribute: string | undefined, value?: string | ResponsiveProp<string | undefined>): string[];
+declare function cssShorthandToClasses(attribute: string, value?: string | ResponsiveProp<string | undefined>): string[];
+
+declare function doesStringIncludeCssUnit(value: string | undefined): boolean;
+
+declare function generateResponsiveClasses(classRoot: string, value: ResponsiveProp<any> | string | undefined): string[];
+
+declare function getAutoCompleteValue(value: string | boolean): string;
+
+declare const getColumnKeys: (columns: Column[]) => Key[];
+
+declare function getDimensionStyles(dimension: CssDimensionAbbreviation, value?: DimensionSize | ResponsiveProp<DimensionSize> | string): {
+    [key: string]: string;
+} | undefined;
+declare function getDimensionClasses(dimension: CssDimensionAbbreviation, value?: DimensionSize | ResponsiveProp<DimensionSize> | string): string[] | undefined;
+/**
+ * Returns an object of styles and class names that correspond with the given value
+ * @param {CssDimensionAbbreviation} dimension width or height
+ * @param {string} [value] value of the dimension
+ */
+declare function getDimensionCss(dimension: CssDimensionAbbreviation, value?: DimensionSize | ResponsiveProp<DimensionSize> | string): StylesAndClasses<CSSProperties>;
+
+/**
+ * Returns a createElement() type based on the props of the Component.
+ * Useful for calculating what type a component should render as.
+ *
+ * @param {function} Component A function or ReactClass.
+ * @param {object} props A ReactElement props object
+ * @param {function} [getDefault] A function that returns a default element type.
+ * @returns {string} A ReactElement type
+ */
+declare function getElementType(// eslint-disable-line import/prefer-default-export
+Component: React__default.Component | React__default.FC, props: {
+    [key: string]: unknown;
+}, getDefault?: () => string): string;
+
+declare function parsePropertyValue(value: string): string | number;
+declare function getFlexStyles(value?: string): FlexProperty | undefined;
+declare function getFlexClasses(value?: string): string[] | undefined;
+/**
+ * Returns an object of styles and class names that correspond with the given flex value
+ * @param {string} [value] spacing token value
+ */
+declare function getFlexCss(value?: ResponsiveProp<FlexProperty> | string): StylesAndClasses<FlexProperty>;
+
+declare const isFunction: <TValue, TArg>(// eslint-disable-line import/prefer-default-export
+valOrFunction: ValueOrFunction<TValue, TArg>) => valOrFunction is ValueFunction<TValue, TArg>;
+
+declare function mergeRefs<T = unknown>(refs: Array<React__default.MutableRefObject<T> | React__default.LegacyRef<T> | undefined | null>): React__default.RefCallback<T>;
+
+declare const prefersReducedMotion: () => boolean;
+
+declare const isModifiedEvent: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => boolean;
+/**
+ * Due to react-router's handling of custom components used in RR <Link>
+ * we must add this validation that ensures the router will execute the passed `navigate`
+ * prop, thus navigating the user without triggering a refresh.
+ *
+ * SOURCES:
+ *    https://github.com/ReactTraining/react-router/issues/7727
+ *    https://github.com/ReactTraining/react-router/issues/7761
+ * */
+declare const handleReactRouterClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>, onClick: ((e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void) | undefined, target: AnchorHTMLAttributes<HTMLAnchorElement>["target"] | undefined, navigate: (() => void) | undefined) => void;
+
+declare const resolveValue: <TValue, TArg>(// eslint-disable-line import/prefer-default-export
+valOrFunction: ValueOrFunction<TValue, TArg>, arg: TArg) => TValue;
+
+type FilterFunction = (child: ReactNode, index?: number, children?: ReactNode[]) => boolean;
+declare const filter: (children: ReactNode, filterFn: FilterFunction) => ReactNode[];
+
+declare const ICON_NAMES: IconName[];
+declare const BORDER_RADIUS_OPTIONS: BorderRadiusSize[];
+declare const BORDER_SIZE_OPTIONS: BorderSize[];
+declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];
+declare const BREAKPOINTS: Breakpoint[];
+declare const BASE_COLOR_OPTIONS: BaseColor[];
+declare const BASE_COLOR_NAMES: ColorName[];
+declare const FONT_COLOR_OPTIONS: FontColor[];
+declare const BACKGROUND_COLOR_OPTIONS: BackgroundColor[];
+declare const BORDER_COLOR_OPTIONS: BorderColor[];
+declare const FONT_SIZE_OPTIONS: FontSize[];
+declare const FONT_FAMILY_OPTIONS: FontFamily[];
+declare const FONT_WEIGHT_OPTIONS: FontWeight[];
+declare const HEADING_SIZE_OPTIONS: HeadingSize[];
+declare const HEIGHT_OPTIONS: HeightSize[];
+declare const LINE_HEIGHT_OPTIONS: LineHeightSize[];
+declare const SPACING_OPTIONS: SpacingSize[];
+declare const WIDTH_OPTIONS: WidthSize[];
+declare const Z_INDEX_OPTIONS: ZIndexSize[];
+declare const Z_INDEX_VALUES: any;
+declare const BOX_SHADOW_OPTIONS: BoxShadowSize[];
+
+export { Alert, type AlertProps, AspectRatio, BACKGROUND_COLOR_OPTIONS, BASE_COLOR_NAMES, BASE_COLOR_OPTIONS, BORDER_COLOR_OPTIONS, BORDER_RADIUS_OPTIONS, BORDER_SIZE_OPTIONS, BOX_SHADOW_OPTIONS, BREAKPOINTS, BREAKPOINT_OPTIONS, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BaseButtonProps, type BaseSpacing, type BorderRadiusSize, Box, type BoxProps, type Breakpoint, type BreakpointSizeWithBase, type BreakpointState, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, CardBaseComponent, type CardProps, type CardStatic, type CardWithStaticComponents, type Cell, Checkbox, CheckboxInput, type CheckboxInputProps, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, type CssAlignContentValue, type CssAlignItemsValue, type CssDimensionAbbreviation, type CssDimensionUnit, type CssDimensionValue, type CssDisplayValue, type CssFlexDirectionValue, type CssFlexValue, type CssJustifyContentValue, type CssOverflowValue, type CssSpacingAbbreviation, type CssTextAlignValue, type CssWhiteSpaceValue, type CssWordBreakValue, Details, DetailsBaseComponent, type DetailsProps, type DetailsStatic, DetailsSummary, type DetailsSummaryProps, type DetailsWithStaticComponents, type DimensionSize, Drawer, DrawerCloseButton, DrawerContent, DrawerHeader, type DrawerPlacementType, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EventWithColumnKey, type ExtendedToastOptions, FONT_COLOR_OPTIONS, FONT_FAMILY_OPTIONS, FONT_SIZE_OPTIONS, FONT_WEIGHT_OPTIONS, type FilterFunction, type FlexProperty, FormControl, type FormControlProps, FormLabel, type FormLabelProps, FormikCheckboxInput, type FormikCheckboxInputProps, FormikRadioGroup, type FormikRadioGroupProps, FormikSelectInput, FormikSelectInputInset, type FormikSelectInputInsetProps, FormikSelectInputNative, type FormikSelectInputNativeProps, type FormikSelectInputProps, FormikSwitch, type FormikSwitchProps, FormikTextInput, FormikTextInputInset, type FormikTextInputInsetProps, type FormikTextInputProps, FormikTextareaInput, FormikTextareaInputInset, type FormikTextareaInputInsetProps, type FormikTextareaInputProps, FormikTimePicker, FormikTimePickerNative, type FormikTimePickerNativeProps, type FormikTimePickerProps, FormikToggleGroup, FormikToggleGroupMulti, type FormikToggleGroupMultiProps, type FormikToggleGroupProps, HEADING_SIZE_OPTIONS, HEIGHT_OPTIONS, Heading, type HeadingProps, type HookWindowSize, type HoverableBoxProperties, ICON_NAMES, Icon, type IconProps, type InputRangeProps, LINE_HEIGHT_OPTIONS, Modal, ModalBaseComponent, type ModalProps, type ModalStatic, type ModalWithStaticComponents, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverPortal, PopoverTrigger, RadioGroup, type RadioGroupProps, RangeInput, ResponsiveContext, type ResponsiveContextShape, type ResponsiveProp, ResponsiveProvider, type ResponsiveProviderProps, type Row, SPACING_OPTIONS, SelectInput, SelectInputInset, type SelectInputInsetProps, type SelectInputInsetSize, SelectInputNative, type SelectInputNativeOption, type SelectInputNativeProps, type SelectInputNativeSize, type SelectInputOptions, type SelectInputProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, type SimulatedEventPayloadType, Spinner, type SpinnerProps, type StylesAndClasses, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, TextInput, TextInputInset, type TextInputInsetProps, type TextInputInsetSize, type TextInputProps, type TextInputSize, type TextInputSizeType, TextareaInput, TextareaInputInset, type TextareaInputInsetProps, type TextareaInputInsetSize, type TextareaInputProps, type TextareaInputSize, type Theme, ThemeProvider, ThemeProviderContext, TimePicker, TimePickerNative, type TimePickerNativeProps, type TimePickerProps, type Toast, ToastContainer, type ToastContainerProps, type ToastOptions, type ToastPosition, type ToastType, Toggle, ToggleGroup, ToggleGroupItem, type ToggleVariant$1 as ToggleVariant, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, type UnknownPropertiesObjType, type UseOpenCloseProps, type UseOpenCloseState, type ValueFunction, type ValueOrFunction, WIDTH_OPTIONS, Z_INDEX_OPTIONS, Z_INDEX_VALUES, boxPropsKeys, createRectRef, cssShorthandToClasses, doesStringIncludeCssUnit, filter, generateBaseClasses, generateResponsiveClasses, getAutoCompleteValue, getColumnKeys, getDimensionClasses, getDimensionCss, getDimensionStyles, getElementType, getFlexClasses, getFlexCss, getFlexStyles, handleReactRouterClick, isFunction, isModifiedEvent, isValidSpacingValue, mergeRefs, parsePropertyValue, prefersReducedMotion, resolveValue, toast, useBreakpoint, useDrawer, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.3.3",
+  "version": "7.3.5",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -14,7 +14,7 @@
     "src"
   ],
   "scripts": {
-    "build": "cross-env IS_PUBLISHING=true tsup && node scripts/create-cjs-shim.js && cross-env IS_PUBLISHING=true webpack --config webpack.config.js",
+    "build": "cross-env IS_PUBLISHING=true tsup && cross-env IS_PUBLISHING=true webpack --config webpack.config.js && node scripts/create-cjs-shim.js",
     "build-storybook": "storybook build",
     "build-storybook-docs": "storybook build --docs",
     "storybook-docs": "storybook dev --docs",

package/src/index.ts

@@ -55,3 +55,5 @@ export * from './components/Toggle/Toggle';
 export * from './components/ToggleGroup/ToggleGroup';
 export * from './components/Tooltip/Tooltip';
 export * from './hooks';
+export * from './types';
+export * from './lib';

package/src/styles/component-modules.js

@@ -0,0 +1,4 @@
+// This file is used by webpack to gather all component CSS module styles
+// into a single dist/css/index.css file.
+const ctx = require.context('../components', true, /\.module\.scss$/);
+ctx.keys().forEach(ctx);