superdesk-ui-framework 4.0.47 → 4.0.49

package/app-typescript/components/avatar/avatar-image.tsx

@@ -11,10 +11,13 @@ export class AvatarContentImage extends React.PureComponent<IPropsImageAvatar> {
     render() {
         const {imageUrl, tooltipText, onClick} = this.props;
 
-        const maybeButtonProps: React.HTMLAttributes<HTMLSpanElement> = onClick == null ? {} : {
-            role: 'button',
-            onClick: () => onClick(),
-        };
+        const maybeButtonProps: React.HTMLAttributes<HTMLSpanElement> =
+            onClick == null
+                ? {}
+                : {
+                      role: 'button',
+                      onClick: () => onClick(),
+                  };
 
         if (imageUrl == null) {
             return (
@@ -31,18 +34,21 @@ export class AvatarContentImage extends React.PureComponent<IPropsImageAvatar> {
                         xmlns="http://www.w3.org/2000/svg"
                         style={{display: 'block', width: '100%', height: '100%'}}
                     >
-                        <circle cx="100" cy="100" r="100" fill="white" fillOpacity="0"/>
+                        <circle cx="100" cy="100" r="100" fill="white" fillOpacity="0" />
                         {/* tslint:disable-next-line:max-line-length */}
-                        <path fillRule="evenodd" clipRule="evenodd" d="M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z" fill="var(--sd-colour-avatar-dummy)" fillOpacity="1"/>
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z"
+                            fill="var(--sd-colour-avatar-dummy)"
+                            fillOpacity="1"
+                        />
                     </svg>
-                </span>);
+                </span>
+            );
         } else {
             return (
-                <span
-                    {...maybeButtonProps}
-                    className="sd-avatar-content"
-                    title={tooltipText}
-                >
+                <span {...maybeButtonProps} className="sd-avatar-content" title={tooltipText}>
                     <img src={imageUrl} />
                 </span>
             );

package/app-typescript/components/avatar/avatar-placeholder.tsx

@@ -24,25 +24,13 @@ export class AvatarPlaceholder extends React.PureComponent<IPropsAvatarPlacehold
         const {size, tooltip, icon, kind, onClick} = this.props;
 
         return (
-            <AvatarWrapper
-                size={size}
-                icon={icon}
-            >
+            <AvatarWrapper size={size} icon={icon}>
                 {(() => {
                     if (kind === 'plus-button') {
-                        return (
-                            <AvatarContentAdd
-                                tooltipText={tooltip ?? undefined}
-                                onClick={onClick}
-                            />
-                        );
+                        return <AvatarContentAdd tooltipText={tooltip ?? undefined} onClick={onClick} />;
                     } else if (kind === 'user-icon') {
                         return (
-                            <AvatarContentImage
-                                imageUrl={null}
-                                tooltipText={tooltip ?? undefined}
-                                onClick={onClick}
-                            />
+                            <AvatarContentImage imageUrl={null} tooltipText={tooltip ?? undefined} onClick={onClick} />
                         );
                     } else {
                         return null;

package/app-typescript/components/avatar/avatar-text.tsx

@@ -8,10 +8,7 @@ interface IPropsTextAvatar extends IPropsBase {
 export class AvatarContentText extends React.PureComponent<IPropsTextAvatar> {
     render() {
         return (
-            <span
-                className="sd-avatar-content sd-avatar-content--text"
-                title={this.props.tooltipText}
-            >
+            <span className="sd-avatar-content sd-avatar-content--text" title={this.props.tooltipText}>
                 <span>{this.props.text.slice(0, 3)}</span>
             </span>
         );

package/app-typescript/components/avatar/avatar-wrapper.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import {Icon} from '../Icon';
 
 interface IPropsAvatarWrapper {
-    size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';  // defaults to medium
+    size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large'; // defaults to medium
     statusIndicator?: {
         status: 'online' | 'offline';
         tooltipText?: string;
@@ -22,7 +22,6 @@ interface IPropsAvatarWrapper {
     statusDot?: {
         color?: string;
     };
-
 }
 
 /**
@@ -42,42 +41,31 @@ export class AvatarWrapper extends React.PureComponent<IPropsAvatarWrapper> {
                     'sd-avatar--large': this.props.size === 'large',
                     'sd-avatar--x-large': this.props.size === 'x-large',
                     'sd-avatar--xx-large': this.props.size === 'xx-large',
-                    'sd-avatar--indicator-status--online' : this.props.statusIndicator?.status === 'online',
-                    'sd-avatar--indicator-status--offline' : this.props.statusIndicator?.status === 'offline',
+                    'sd-avatar--indicator-status--online': this.props.statusIndicator?.status === 'online',
+                    'sd-avatar--indicator-status--offline': this.props.statusIndicator?.status === 'offline',
                     'sd-avatar--empty-light': this.props.noAvatarPlaceholderColor === 'subtle',
                 })}
                 data-test-id={this.props['data-test-id']}
-                title={this.props.statusIndicator != null ? this.props.statusIndicator.tooltipText : ""}
+                title={this.props.statusIndicator != null ? this.props.statusIndicator.tooltipText : ''}
             >
                 {this.props.children}
 
-                {
-                    this.props.administratorIndicator?.enabled === true
-                        ? (
-                            <i
-                                className="icon-settings sd-avatar--indicator-admin"
-                                title={this.props.administratorIndicator.tooltipText}
-                            />
-                        )
-                        : null
-                }
+                {this.props.administratorIndicator?.enabled === true ? (
+                    <i
+                        className="icon-settings sd-avatar--indicator-admin"
+                        title={this.props.administratorIndicator.tooltipText}
+                    />
+                ) : null}
 
-                {
-                    icon != null && (
-                        <span className="sd-avatar__icon">
-                            <Icon name={icon.name} color={icon.color} />
-                        </span>
-                    )
-                }
+                {icon != null && (
+                    <span className="sd-avatar__icon">
+                        <Icon name={icon.name} color={icon.color} />
+                    </span>
+                )}
 
-                {
-                    statusDot != null && (
-                        <span
-                            style={{backgroundColor: statusDot.color}}
-                            className="sd-avatar__coverage-state">
-                        </span>
-                    )
-                }
+                {statusDot != null && (
+                    <span style={{backgroundColor: statusDot.color}} className="sd-avatar__coverage-state"></span>
+                )}
             </span>
         );
     }

package/app-typescript/components/avatar/avatar.tsx

@@ -21,7 +21,7 @@ export interface IPropsAvatar {
     statusDot?: {
         color?: string;
     };
-    noAvatarPlaceholderColor?: 'subtle' | 'strong';  // defaults to strong; only applies to placeholder image
+    noAvatarPlaceholderColor?: 'subtle' | 'strong'; // defaults to strong; only applies to placeholder image
 
     /**
      * displayName is shown as tooltip by default
@@ -53,7 +53,8 @@ export class Avatar extends React.PureComponent<IPropsAvatar> {
         } = this.props;
 
         const tooltipCombined = [displayName, this.props.tooltip]
-            .filter((str) => (str ?? '').trim().length > 0).join('\n');
+            .filter((str) => (str ?? '').trim().length > 0)
+            .join('\n');
 
         return (
             <AvatarWrapper
@@ -68,13 +69,9 @@ export class Avatar extends React.PureComponent<IPropsAvatar> {
                     if (customContent != null) {
                         return customContent;
                     } else if (imageUrl != null || initials == null) {
-                        return (
-                            <AvatarContentImage imageUrl={imageUrl} tooltipText={tooltipCombined} />
-                        );
+                        return <AvatarContentImage imageUrl={imageUrl} tooltipText={tooltipCombined} />;
                     } else {
-                        return (
-                            <AvatarContentText text={initials} tooltipText={tooltipCombined} />
-                        );
+                        return <AvatarContentText text={initials} tooltipText={tooltipCombined} />;
                     }
                 })()}
             </AvatarWrapper>

package/app-typescript/components/with-pagination.spec.tsx

@@ -13,7 +13,7 @@ interface IPost {
 const TIMEOUT = 1000;
 
 export class Paginated extends React.PureComponent {
-    getItems(): Promise<{items: Array<IPost>, itemCount: number}> {
+    getItems(): Promise<{items: Array<IPost>; itemCount: number}> {
         return new Promise((resolve) => {
             setTimeout(() => {
                 return resolve({items: range(1, 500).map((x) => ({title: `title ${x}`})), itemCount: 500});
@@ -23,12 +23,8 @@ export class Paginated extends React.PureComponent {
 
     render() {
         return (
-            <WithPagination
-                getItems={() => this.getItems()}
-            >
-                {
-                    (items) => <div>{JSON.stringify(items)}</div>
-                }
+            <WithPagination getItems={() => this.getItems()}>
+                {(items) => <div>{JSON.stringify(items)}</div>}
             </WithPagination>
         );
     }
@@ -70,10 +66,7 @@ describe('with-pagination', () => {
         const wrapper = mount(<Paginated />);
 
         setTimeout(() => {
-            assert.strictEqual(
-                wrapper.update().find('[data-test-id="page-button-1"]').length,
-                2,
-            );
+            assert.strictEqual(wrapper.update().find('[data-test-id="page-button-1"]').length, 2);
             done();
         }, TIMEOUT + 100);
     });
@@ -85,10 +78,7 @@ describe('with-pagination', () => {
             wrapper.update();
             wrapper.find('[data-test-id="btn-3"]').at(0).simulate('click');
 
-            assert.strictEqual(
-                wrapper.find('[data-test-id="page-button-4"]').length,
-                2,
-            );
+            assert.strictEqual(wrapper.find('[data-test-id="page-button-4"]').length, 2);
             done();
         }, TIMEOUT + 100);
     });
@@ -101,10 +91,7 @@ describe('with-pagination', () => {
             wrapper.find('[data-test-id="btn-4"]').at(0).simulate('click');
             wrapper.find('[data-test-id="btn-2"]').at(0).simulate('click');
 
-            assert.strictEqual(
-                wrapper.find('[data-test-id="button4"]').length,
-                2,
-            );
+            assert.strictEqual(wrapper.find('[data-test-id="button4"]').length, 2);
             done();
         }, TIMEOUT + 100);
     });
@@ -116,10 +103,7 @@ describe('with-pagination', () => {
             wrapper.update();
             wrapper.find('[data-test-id="btn-4"]').at(0).simulate('click');
 
-            assert.strictEqual(
-                wrapper.find('[data-test-id="more-pages"]').length,
-                2,
-            );
+            assert.strictEqual(wrapper.find('[data-test-id="more-pages"]').length, 2);
             done();
         }, TIMEOUT + 100);
     });
@@ -136,10 +120,7 @@ describe('with-pagination', () => {
             wrapper.update();
             wrapper.find('[data-test-id="btn-4"]').at(1).simulate('click');
 
-            assert.strictEqual(
-                wrapper.getDOMNode().scrollTop,
-                0,
-            );
+            assert.strictEqual(wrapper.getDOMNode().scrollTop, 0);
             done();
         }, TIMEOUT + 100);
     });

package/app-typescript/helpers.tsx

@@ -11,9 +11,9 @@ export function getTextColor(backgroundColor: string): 'black' | 'white' | undef
         const r = parseInt(backgroundColor.substr(1, 2), 16);
         const g = parseInt(backgroundColor.substr(3, 2), 16);
         const b = parseInt(backgroundColor.substr(5, 2), 16);
-        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+        const yiq = (r * 299 + g * 587 + b * 114) / 1000;
 
-        return (yiq >= 128) ? 'black' : 'white';
+        return yiq >= 128 ? 'black' : 'white';
     } else {
         return;
     }

package/app-typescript/index.ts

@@ -1,114 +1,125 @@
 // this intermediary file is required in order to be able to generate TypeScript definitions
 // all exports in this file must also be exported from ../app/index.js
 
-export { HelloWorld } from './components/HelloWorld';
-export { Button } from './components/Button';
-export { Input } from './components/Input';
-export { Select, Option } from './components/Select';
-export { SelectWithTemplate } from './components/SelectWithTemplate';
-export { WithPagination } from './components/WithPagination';
-export { Popover } from './components/Popover';
-export { Label } from './components/Label';
-export { Card } from './components/Card';
-export { Badge } from './components/Badge';
-export { Alert } from './components/Alert';
-export { AvatarWrapper } from './components/avatar/avatar-wrapper';
-export { AvatarContentText } from './components/avatar/avatar-text';
-export { AvatarContentImage } from './components/avatar/avatar-image';
-export { AvatarGroup } from './components/avatar/avatar-group';
-export { Avatar } from './components/avatar/avatar';
-export { AvatarPlaceholder } from './components/avatar/avatar-placeholder';
-export { Rotate } from './components/Rotate';
-export { IconButton } from './components/IconButton';
-export { IconLabel } from './components/IconLabel';
-export { Tooltip } from './components/Tooltip';
-export { DurationInput } from './components/DurationInput';
-export { getDurationString } from './components/DurationInput';
-export { DatePicker } from './components/DatePicker';
-export { DateTimePicker } from './components/DateTimePicker';
-export { DatePickerISO } from './components/DatePicker';
-export { TimePicker } from './components/TimePicker';
-export { TimePickerV2 } from './components/TimePickerV2';
-export { FormLabel } from './components/FormLabel';
-export { Switch } from './components/Switch';
-export { SwitchGroup } from './components/SwitchGroup';
-export { ButtonGroup } from './components/ButtonGroup';
-export { Loader } from './components/Loader';
-export { RadioGroup } from './components/RadioGroup';
-export { Checkbox } from './components/Checkbox';
-export { RadioButtonGroup } from './components/RadioButtonGroup';
-export { CheckboxButton } from './components/CheckboxButton';
-export { CheckGroup } from './components/CheckGroup';
-export { CheckButtonGroup } from './components/CheckButtonGroup';
-export { NavButton } from './components/NavButton';
-export { Tab, TabList } from './components/TabList';
-export { LeftMenu } from './components/LeftMenu';
-export { SubNav, SubNavDivider } from './components/SubNav';
-export { SlidingToolbar } from './components/SlidingToolbar';
-export { StrechBar } from './components/StrechBar';
-export { PropsList, Prop } from './components/PropsList';
-export { Icon } from './components/Icon';
-export { Divider } from './components/Divider';
-export { ContentDivider } from './components/ContentDivider';
-export { HeadingText } from './components/HeadingText';
-export { DropdownFirst } from './components/DropdownFirst';
-export { DropdownItem } from './components/DropdownFirst';
-export { DropdownLabel } from './components/DropdownFirst';
-export { DropdownDivider } from './components/DropdownFirst';
-export { Dropdown } from './components/Dropdown';
-export { Tag } from './components/Tag';
-export { TagInput } from './components/TagInput';
-export { TabLabel, TabPanel, TabContent, Tabs } from './components/TabCustom';
-export { EmptyState } from './components/EmptyState';
-export { Autocomplete } from './components/Autocomplete';
-export { DonutChart } from './components/DonutChart';
-export { Carousel } from './components/Carousel';
-export { Modal } from './components/Modal';
-export { GridList } from './components/GridList';
-export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock,
-    GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock,
-    GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper
+export {HelloWorld} from './components/HelloWorld';
+export {Button} from './components/Button';
+export {Input} from './components/Input';
+export {Select, Option} from './components/Select';
+export {SelectWithTemplate} from './components/SelectWithTemplate';
+export {WithPagination} from './components/WithPagination';
+export {Popover} from './components/Popover';
+export {Label} from './components/Label';
+export {Card} from './components/Card';
+export {Badge} from './components/Badge';
+export {Alert} from './components/Alert';
+export {AvatarWrapper} from './components/avatar/avatar-wrapper';
+export {AvatarContentText} from './components/avatar/avatar-text';
+export {AvatarContentImage} from './components/avatar/avatar-image';
+export {AvatarGroup} from './components/avatar/avatar-group';
+export {Avatar} from './components/avatar/avatar';
+export {AvatarPlaceholder} from './components/avatar/avatar-placeholder';
+export {Rotate} from './components/Rotate';
+export {IconButton} from './components/IconButton';
+export {IconLabel} from './components/IconLabel';
+export {Tooltip} from './components/Tooltip';
+export {DurationInput} from './components/DurationInput';
+export {getDurationString} from './components/DurationInput';
+export {DatePicker} from './components/DatePicker';
+export {DateTimePicker} from './components/DateTimePicker';
+export {DatePickerISO} from './components/DatePicker';
+export {TimePicker} from './components/TimePicker';
+export {TimePickerV2} from './components/TimePickerV2';
+export {FormLabel} from './components/FormLabel';
+export {Switch} from './components/Switch';
+export {SwitchGroup} from './components/SwitchGroup';
+export {ButtonGroup} from './components/ButtonGroup';
+export {Loader} from './components/Loader';
+export {RadioGroup} from './components/RadioGroup';
+export {Checkbox} from './components/Checkbox';
+export {RadioButtonGroup} from './components/RadioButtonGroup';
+export {CheckboxButton} from './components/CheckboxButton';
+export {CheckGroup} from './components/CheckGroup';
+export {CheckButtonGroup} from './components/CheckButtonGroup';
+export {NavButton} from './components/NavButton';
+export {Tab, TabList} from './components/TabList';
+export {LeftMenu} from './components/LeftMenu';
+export {SubNav, SubNavDivider} from './components/SubNav';
+export {SlidingToolbar} from './components/SlidingToolbar';
+export {StrechBar} from './components/StrechBar';
+export {PropsList, Prop} from './components/PropsList';
+export {Icon} from './components/Icon';
+export {Divider} from './components/Divider';
+export {ContentDivider} from './components/ContentDivider';
+export {HeadingText} from './components/HeadingText';
+export {DropdownFirst} from './components/DropdownFirst';
+export {DropdownItem} from './components/DropdownFirst';
+export {DropdownLabel} from './components/DropdownFirst';
+export {DropdownDivider} from './components/DropdownFirst';
+export {Dropdown} from './components/Dropdown';
+export {Tag} from './components/Tag';
+export {TagInput} from './components/TagInput';
+export {TabLabel, TabPanel, TabContent, Tabs} from './components/TabCustom';
+export {EmptyState} from './components/EmptyState';
+export {Autocomplete} from './components/Autocomplete';
+export {DonutChart} from './components/DonutChart';
+export {Carousel} from './components/Carousel';
+export {Modal} from './components/Modal';
+export {GridList} from './components/GridList';
+export {
+    GridItem,
+    GridItemContent,
+    GridItemMedia,
+    GridItemFooter,
+    GridItemContentBlock,
+    GridItemTime,
+    GridItemTitle,
+    GridItemText,
+    GridItemSlug,
+    GridItemFooterBlock,
+    GridItemFooterActions,
+    GridItemTopActions,
+    GridItemCheckWrapper,
 } from './components/GridItem';
-export { toasted } from './components/Toast';
-export { Menu } from './components/Menu';
-export { ToggleBox } from './components/ToggleBox/index';
-export { SelectGrid } from './components/SelectGrid';
-export { IconPicker } from './components/IconPicker';
-export { ThemeSelector } from './components/ThemeSelector';
-export { DropZone } from './components/DropZone';
-export { CreateButton } from './components/CreateButton';
-export { SearchBar } from './components/SearchBar';
-export { WithSizeObserver } from './components/WithSizeObserver';
-export { SvgIconIllustration } from './components/SvgIconIllustration';
-export { IllustrationButton } from './components/IllustrationButton';
+export {toasted} from './components/Toast';
+export {Menu} from './components/Menu';
+export {ToggleBox} from './components/ToggleBox/index';
+export {SelectGrid} from './components/SelectGrid';
+export {IconPicker} from './components/IconPicker';
+export {ThemeSelector} from './components/ThemeSelector';
+export {DropZone} from './components/DropZone';
+export {CreateButton} from './components/CreateButton';
+export {SearchBar} from './components/SearchBar';
+export {WithSizeObserver} from './components/WithSizeObserver';
+export {SvgIconIllustration} from './components/SvgIconIllustration';
+export {IllustrationButton} from './components/IllustrationButton';
 
 export * from './components/Layouts';
 export * from './components/Form';
 export * from './components/Navigation';
 export * from './components/Lists';
 
-export { Skeleton } from './components/Skeleton';
-export { ListItemLoader } from './components/ListItemLoader';
-export { Spinner, LoadingOverlay } from './components/Spinner';
-export { Text } from './components/Text/Text';
-export { Time } from './components/Text/Time';
-export { Heading } from './components/Text/Heading';
-export { BottomNav } from './components/Navigation/BottomNav';
-export { TreeSelect } from './components/TreeSelect/TreeSelect';
-export { TreeMenu } from './components/TreeMenu';
-export { TableList, TableListItem } from './components/Lists/TableList';
-export { ContentListItem } from './components/Lists/ContentList';
-export { MultiSelect } from './components/MultiSelect';
-export { ResizablePanels } from './components/ResizablePanels';
-export { WithPopover } from './components/WithPopover';
-export { PopupPositioner, showPopup } from './components/ShowPopup';
-export { Spacer, SpacerBlock } from '@sourcefabric/common';
-export { ResizeObserverComponent } from './components/ResizeObserverComponent';
-export { DragHandleDots } from './components/DragHandleDots';
-export { DragHandle } from './components/DragHandle';
+export {Skeleton} from './components/Skeleton';
+export {ListItemLoader} from './components/ListItemLoader';
+export {Spinner, LoadingOverlay} from './components/Spinner';
+export {Text} from './components/Text/Text';
+export {Time} from './components/Text/Time';
+export {Heading} from './components/Text/Heading';
+export {BottomNav} from './components/Navigation/BottomNav';
+export {TreeSelect} from './components/TreeSelect/TreeSelect';
+export {TreeMenu} from './components/TreeMenu';
+export {TableList, TableListItem} from './components/Lists/TableList';
+export {ContentListItem} from './components/Lists/ContentList';
+export {MultiSelect} from './components/MultiSelect';
+export {ResizablePanels} from './components/ResizablePanels';
+export {WithPopover} from './components/WithPopover';
+export {PopupPositioner, showPopup} from './components/ShowPopup';
+export {Spacer, SpacerBlock} from '@sourcefabric/common';
+export {ResizeObserverComponent} from './components/ResizeObserverComponent';
+export {DragHandleDots} from './components/DragHandleDots';
+export {DragHandle} from './components/DragHandle';
 export {CalendarWeekDayItem, WeeklyCalendarGrid, WeeklyCalendarGridItem} from './components/Lists/CalendarWeekDayItem';
-export { getTextColor } from './helpers';
-export { setupLocalization } from './localization';
+export {getTextColor} from './helpers';
+export {setupLocalization} from './localization';
 
 // declare non-typescript exports to prevent errors
 export declare const ToggleBoxNext: any;

package/app-typescript/utils/time.tsx

@@ -0,0 +1,31 @@
+import {range} from 'lodash';
+
+export type ITimeUnit = 'hours' | 'minutes' | 'seconds';
+
+export function getOptionsForTimeUnit(
+    timeUnit: ITimeUnit,
+    is12HourFormat?: boolean,
+    disabledOptions?: {[key: string]: Array<number>},
+): Array<string> {
+    const format12HourArr = [12, ...range(1, 12)];
+
+    const timeUnitArray = (() => {
+        if (timeUnit === 'hours') {
+            if (is12HourFormat) {
+                return format12HourArr;
+            } else {
+                return range(24);
+            }
+        } else {
+            return range(60);
+        }
+    })();
+
+    return timeUnitArray
+        .filter((item) => !(disabledOptions?.[timeUnit] ?? []).includes(item))
+        .map((value) => value.toString().padStart(2, '0'));
+}
+
+export function padValue(value: number) {
+    return value.toString().padStart(2, '0');
+}

package/declarations.d.ts

@@ -1,4 +1,4 @@
 declare module '*.scss' {
     const content: {[className: string]: string};
     export default content;
-}
+}