@commonsku/styles 1.17.16 → 1.17.18
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/index.cjs +366 -154
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +51 -4
- package/dist/index.mjs +365 -157
- package/dist/index.mjs.map +1 -1
- package/dist/styles/DateRangeDropdown.d.ts +16 -0
- package/dist/styles/DateRangeDropdown.d.ts.map +1 -0
- package/dist/styles/DateRangePicker.d.ts +25 -0
- package/dist/styles/DateRangePicker.d.ts.map +1 -0
- package/dist/styles/Datepicker.d.ts +3 -1
- package/dist/styles/Datepicker.d.ts.map +1 -1
- package/dist/styles/Input.d.ts +8 -0
- package/dist/styles/Input.d.ts.map +1 -1
- package/dist/styles/Tooltip.d.ts +4 -0
- package/dist/styles/Tooltip.d.ts.map +1 -0
- package/dist/styles/datepickerStyles.d.ts +1 -1
- package/dist/styles/datepickerStyles.d.ts.map +1 -1
- package/dist/styles/icons/CommentBubbleIcon.d.ts +47 -0
- package/dist/styles/icons/CommentBubbleIcon.d.ts.map +1 -0
- package/dist/styles/icons/index.d.ts +1 -0
- package/dist/styles/icons/index.d.ts.map +1 -1
- package/dist/styles/index.d.ts +3 -0
- package/dist/styles/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import * as React$1 from 'react';
|
|
3
|
-
import React__default, { CSSProperties, MouseEvent, Component, ReactEventHandler, MouseEventHandler, ReactNode, MutableRefObject, ForwardedRef } from 'react';
|
|
3
|
+
import React__default, { CSSProperties, MouseEvent, Component, ReactEventHandler, MouseEventHandler, ReactNode, SyntheticEvent, MutableRefObject, ForwardedRef } from 'react';
|
|
4
4
|
import * as styled_components from 'styled-components';
|
|
5
5
|
import { CSSObject, DefaultTheme, ThemeProps, CSSProperties as CSSProperties$1, StyledComponent } from 'styled-components';
|
|
6
6
|
import * as react_dropzone from 'react-dropzone';
|
|
@@ -17,6 +17,7 @@ import * as react_select_dist_declarations_src_Select from 'react-select/dist/de
|
|
|
17
17
|
import { ReactDatePickerProps } from 'react-datepicker';
|
|
18
18
|
import { HeaderGroup, UseSortByColumnProps, UseTableRowProps, UseExpandedRowProps, UseGroupByRowProps, UseRowSelectRowProps, UseRowStateRowProps, Column as Column$1, SortingRule, Cell } from 'react-table';
|
|
19
19
|
import { ListOnScrollProps } from 'react-window';
|
|
20
|
+
import * as react_tooltip from 'react-tooltip';
|
|
20
21
|
|
|
21
22
|
type SharedStyleTypes = {
|
|
22
23
|
pr?: boolean | number;
|
|
@@ -441,6 +442,8 @@ type CommonInputProp = {
|
|
|
441
442
|
};
|
|
442
443
|
type BaseInputProps = CommonInputProp & {
|
|
443
444
|
hasIcon?: boolean;
|
|
445
|
+
} & {
|
|
446
|
+
password?: boolean;
|
|
444
447
|
} & SharedStyleTypes;
|
|
445
448
|
type InputProps = BaseInputProps & React__default.InputHTMLAttributes<HTMLInputElement>;
|
|
446
449
|
declare const InputIconLabel: styled_components.StyledComponent<"div", any, CommonInputProp & {
|
|
@@ -452,9 +455,13 @@ declare const InputIconLabel: styled_components.StyledComponent<"div", any, Comm
|
|
|
452
455
|
declare const InputIconLabelContainer: styled_components.StyledComponent<"div", any, {}, never>;
|
|
453
456
|
declare const Input: styled_components.StyledComponent<"input", any, CommonInputProp & {
|
|
454
457
|
hasIcon?: boolean | undefined;
|
|
458
|
+
} & {
|
|
459
|
+
password?: boolean | undefined;
|
|
455
460
|
} & SharedStyleTypes, never>;
|
|
456
461
|
declare const LabeledInput: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & CommonInputProp & {
|
|
457
462
|
hasIcon?: boolean | undefined;
|
|
463
|
+
} & {
|
|
464
|
+
password?: boolean | undefined;
|
|
458
465
|
} & SharedStyleTypes & {
|
|
459
466
|
label: string;
|
|
460
467
|
name?: string | undefined;
|
|
@@ -463,6 +470,8 @@ declare const LabeledInput: React__default.ForwardRefExoticComponent<React__defa
|
|
|
463
470
|
} & React__default.RefAttributes<HTMLInputElement>>;
|
|
464
471
|
declare const LabeledIconInput: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & CommonInputProp & {
|
|
465
472
|
hasIcon?: boolean | undefined;
|
|
473
|
+
} & {
|
|
474
|
+
password?: boolean | undefined;
|
|
466
475
|
} & SharedStyleTypes & {
|
|
467
476
|
label?: string | undefined;
|
|
468
477
|
name?: string | undefined;
|
|
@@ -2575,10 +2584,12 @@ declare const CustomDateInput: React__default.ForwardRefExoticComponent<{
|
|
|
2575
2584
|
error?: boolean | undefined;
|
|
2576
2585
|
} & {
|
|
2577
2586
|
hasIcon?: boolean | undefined;
|
|
2587
|
+
} & {
|
|
2588
|
+
password?: boolean | undefined;
|
|
2578
2589
|
} & SharedStyleTypes & React__default.InputHTMLAttributes<HTMLInputElement> & {
|
|
2579
2590
|
isClearable?: boolean | undefined;
|
|
2580
2591
|
} & React__default.RefAttributes<HTMLInputElement>>;
|
|
2581
|
-
type DatepickerProps = Omit<ReactDatePickerProps, 'value'> & Omit<InputProps, 'value'> & {
|
|
2592
|
+
type DatepickerProps = Omit<ReactDatePickerProps, 'value'> & Omit<InputProps, 'value' | 'onChange'> & {
|
|
2582
2593
|
value?: Date | null;
|
|
2583
2594
|
placeholder?: string;
|
|
2584
2595
|
};
|
|
@@ -3006,6 +3017,33 @@ type SelectionTableProps<RowType extends Record<string, unknown>, TableProps, Ta
|
|
|
3006
3017
|
};
|
|
3007
3018
|
declare const SelectionTable: <RowType extends Record<string, unknown>, TableProps, TableFooterProps>(props: SelectionTableProps<RowType, TableProps, TableFooterProps>) => React__default.JSX.Element;
|
|
3008
3019
|
|
|
3020
|
+
interface DateRange {
|
|
3021
|
+
category: string;
|
|
3022
|
+
startDate?: Date | null;
|
|
3023
|
+
endDate?: Date | null;
|
|
3024
|
+
}
|
|
3025
|
+
interface DateRangePreset {
|
|
3026
|
+
name: string;
|
|
3027
|
+
label: string;
|
|
3028
|
+
}
|
|
3029
|
+
type DateRangePickerProps = Omit<DatepickerProps, 'value' | 'onChange' | 'dateFormat'> & {
|
|
3030
|
+
range: DateRange;
|
|
3031
|
+
dateFormat?: string;
|
|
3032
|
+
onChange?: (range: DateRange, event?: SyntheticEvent<any>) => void;
|
|
3033
|
+
presets?: DateRangePreset[];
|
|
3034
|
+
};
|
|
3035
|
+
declare const DateRangePicker: React__default.ForwardRefExoticComponent<Omit<DatepickerProps, "value" | "dateFormat" | "onChange"> & {
|
|
3036
|
+
range: DateRange;
|
|
3037
|
+
dateFormat?: string | undefined;
|
|
3038
|
+
onChange?: ((range: DateRange, event?: SyntheticEvent<any>) => void) | undefined;
|
|
3039
|
+
presets?: DateRangePreset[] | undefined;
|
|
3040
|
+
} & React__default.RefAttributes<HTMLDivElement>>;
|
|
3041
|
+
|
|
3042
|
+
interface DateRangeDropdownProps extends DateRangePickerProps {
|
|
3043
|
+
dateText?: string;
|
|
3044
|
+
}
|
|
3045
|
+
declare const DateRangeDropdown: (props: DateRangeDropdownProps) => React__default.JSX.Element;
|
|
3046
|
+
|
|
3009
3047
|
type ResponsiveValue<T = string | number> = T | Array<T | null> | {
|
|
3010
3048
|
xs?: T;
|
|
3011
3049
|
sm?: T;
|
|
@@ -3575,7 +3613,13 @@ declare function DesignIcon({ color, size, altText, ...props }: DesignIconProps)
|
|
|
3575
3613
|
type ResizableIconProps = SVGIconProps;
|
|
3576
3614
|
declare function ResizableIcon({ color, altText, ...props }: ResizableIconProps): React__default.JSX.Element;
|
|
3577
3615
|
|
|
3578
|
-
|
|
3616
|
+
type CommentBubbleIconProps = {
|
|
3617
|
+
number?: number;
|
|
3618
|
+
numberStyle?: React__default.CSSProperties;
|
|
3619
|
+
} & SVGIconProps;
|
|
3620
|
+
declare function CommentBubbleIcon({ color, size, altText, number, numberStyle, ...props }: CommentBubbleIconProps): React__default.JSX.Element;
|
|
3621
|
+
|
|
3622
|
+
declare const datepickerStyles = "\n.react-datepicker {\n font-family: \"skufont-demibold\", sans-serif;\n color: var(--color-neutrals-dark);\n}\n\n.commonsku-styles-datepicker {\n &.react-datepicker-wrapper {\n width: 100%;\n }\n\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n\n .react-datepicker {\n border-radius: 3px;\n border: 1px solid var(--color-primary1-60);\n outline: none;\n box-shadow: 1px 1px 0px var(--color-primary1-60),\n -1px -1px 0px var(--color-primary1-60),\n 1px -1px 0px var(--color-primary1-60),\n -1px 1px 0px var(--color-primary1-60);\n }\n\n /* For date ranges */\n &.daterangepicker {\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n {\n background-color: var(--color-primary1-60);\n color: #fff;\n }\n\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n background-color: var(--color-primary1-40);\n }\n\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--weekend,\n .react-datepicker__day--selected\n )\n {\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day--in-range.react-datepicker__day--weekend:not(\n .react-datepicker__day--selected,\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n color: var(--color-errors-main);\n }\n\n .react-datepicker__day--in-selecting-range:not(\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n background-color: var(--color-primary1-40);\n &.react-datepicker__day:not(\n .react-datepicker__day--outside-month,\n .react-datepicker__day--weekend,\n ) {\n color: var(--color-neutrals-90);\n }\n &.react-datepicker__day--outside-month {\n color: var(--color-neutrals-70);\n }\n &.react-datepicker__day--weekend {\n color: var(--color-errors-main);\n }\n }\n }\n\n .react-datepicker__current-month,\n .react-datepicker-time__header,\n .react-datepicker-year-header,\n .react-datepicker__header {\n padding-top: 8px;\n padding-bottom: 8px;\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__header,\n .react-datepicker__today-button {\n background: var(--color-neutrals-20);\n padding-top: 8px;\n padding-bottom: 8px;\n }\n\n .react-datepicker__header {\n border-bottom: none;\n }\n\n .react-datepicker__today-button {\n border-top: none;\n }\n\n .react-datepicker__day\n {\n outline: none;\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day-name {\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n .react-datepicker__month-text:hover,\n .react-datepicker__quarter-text:hover,\n .react-datepicker__year-text:hover {\n background-color: var(--color-neutrals-20);\n }\n\n .react-datepicker__day--outside-month {\n color: var(--color-neutrals-70);\n }\n\n .react-datepicker__day--weekend {\n color: var(--color-errors-main);\n }\n\n .react-datepicker__day--selected,\n .react-datepicker__month-text--keyboard-selected,\n .react-datepicker__quarter-text--keyboard-selected,\n .react-datepicker__year-text--keyboard-selected\n {\n background-color: var(--color-primary1-60);\n color: #fff;\n }\n\n .react-datepicker__day--keyboard-selected {\n background-color: inherit;\n }\n\n .react-datepicker__triangle {\n border-bottom-color: var(--color-neutrals-20) !important;\n }\n\n .react-datepicker__triangle::before {\n border-bottom-color: var(--color-primary1-60) !important;\n border-top-color: var(--color-primary1-60) !important;\n }\n\n .react-datepicker__month-select,\n .react-datepicker__year-select {\n height: 30px;\n border: 2px solid var(--color-primary1-60);\n padding: 3px;\n border-radius: 5px;\n outline: none;\n }\n\n .react-datepicker__time-container {\n margin-top: -2px;\n border-top-left-radius: 0px;\n border-right: 2px solid var(--color-primary1-60);\n border-bottom: 2px solid var(--color-primary1-60);\n border-top: 2px solid var(--color-primary1-60);\n }\n\n .react-datepicker__navigation-icon {\n &.react-datepicker__navigation-icon--next::before {\n top: 2px;\n left: -8px;\n height: 6px;\n width: 6px;\n border-width: 3px 3px 0 0;\n border-top-right-radius: 2px;\n border-color: var(--color-primary1-60);\n }\n\n &.react-datepicker__navigation-icon--previous::before {\n top: 2px;\n right: -8px;\n height: 6px;\n width: 6px;\n border-width: 3px 3px 0 0;\n border-top-right-radius: 2px;\n border-color: var(--color-primary1-60);\n }\n }\n\n .react-datepicker__aria-live {\n display: none;\n }\n\n @media only screen and (min-height: 600px) and (max-height: 800px ) {\n .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n overflow-y: scroll;\n max-height: 140px;\n }\n }\n @media only screen and (max-height: 599px ) {\n .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n overflow-y: scroll;\n max-height: 110px;\n }\n\n .react-datepicker__time-container {\n margin-top: -2px;\n border-top-left-radius: 0px;\n border-right: 2px solid var(--color-primary1-60);\n border-bottom: 2px solid var(--color-primary1-60);\n border-top: 2px solid var(--color-primary1-60);\n }\n }\n}\n";
|
|
3579
3623
|
//# sourceMappingURL=datepickerStyles.d.ts.map
|
|
3580
3624
|
|
|
3581
3625
|
type ConfirmPopupProps = {
|
|
@@ -3992,4 +4036,7 @@ declare const Dropzone: React__default.ForwardRefExoticComponent<Pick<React__def
|
|
|
3992
4036
|
useDropzoneProps?: boolean | undefined;
|
|
3993
4037
|
} & React__default.RefAttributes<DropzoneRef>>;
|
|
3994
4038
|
|
|
3995
|
-
|
|
4039
|
+
declare const Tooltip: styled_components.StyledComponent<({ id, anchorId, anchorSelect, content, html, render, className, classNameArrow, variant, place, offset, wrapper, children, events, openOnClick, positionStrategy, middlewares, delayShow, delayHide, float, hidden, noArrow, clickable, closeOnEsc, closeOnScroll, closeOnResize, style, position, isOpen, disableStyleInjection, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, }: react_tooltip.ITooltip) => React$1.JSX.Element, any, {}, never>;
|
|
4040
|
+
//# sourceMappingURL=Tooltip.d.ts.map
|
|
4041
|
+
|
|
4042
|
+
export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BaseCskuProps, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonProps, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps$1 as CollapsibleProps, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentBubbleIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, DateRangeDropdown, DateRangePicker, Datepicker, DaysBodyWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, Dropzone, DropzoneProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MenuIcon, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, ProductCard, ProductDetail, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, RenderChild, ResizableIcon, ResponsiveTable, Row$1 as Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyleTypes, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, SkubotLogo, SkubotSpinner, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, Tooltip, TrashIcon, TrendIcon, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$1 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
|