@indico-data/design-system 1.0.52 → 1.0.53

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.
Files changed (58) hide show
  1. package/jest.config.js +1 -2
  2. package/lib/components/Icon/Icon.stories.d.ts +2 -2
  3. package/lib/components/Icon/indicons.d.ts +1 -0
  4. package/lib/components/Navigation/Drawer/constants.d.ts +3 -0
  5. package/lib/components/index.d.ts +1 -1
  6. package/lib/components/inputs/DatePicker/DatePicker.d.ts +15 -0
  7. package/lib/components/inputs/DatePicker/DatePicker.stories.d.ts +6 -0
  8. package/lib/components/inputs/DatePicker/DatePicker.styles.d.ts +2 -0
  9. package/lib/components/inputs/DatePicker/index.d.ts +1 -0
  10. package/lib/components/inputs/NoInputDatePicker/NoInputDatePicker.d.ts +19 -0
  11. package/lib/components/inputs/NoInputDatePicker/NoInputDatePicker.stories.d.ts +7 -0
  12. package/lib/components/inputs/NoInputDatePicker/NoInputDatePicker.styles.d.ts +2 -0
  13. package/lib/components/inputs/NoInputDatePicker/__tests__/NoInputDatePicker.test.d.ts +1 -0
  14. package/lib/components/inputs/NoInputDatePicker/index.d.ts +1 -0
  15. package/lib/components/inputs/index.d.ts +2 -0
  16. package/lib/components/text-truncate/TextTruncate.d.ts +1 -1
  17. package/lib/index.d.ts +61 -28
  18. package/lib/index.esm.js +21441 -13325
  19. package/lib/index.esm.js.map +1 -1
  20. package/lib/index.js +21462 -13328
  21. package/lib/index.js.map +1 -1
  22. package/lib/types.d.ts +1 -0
  23. package/lib/utils/color.d.ts +21 -0
  24. package/lib/utils/index.d.ts +4 -0
  25. package/lib/utils/number.d.ts +21 -0
  26. package/lib/utils/string.d.ts +12 -0
  27. package/package.json +10 -3
  28. package/src/components/Icon/indicons.tsx +6 -0
  29. package/src/components/ListTable/Header/Header.tsx +1 -1
  30. package/src/components/Pagination/Pagination.tsx +1 -1
  31. package/src/components/basic-section/SectionTable/SectionTable.styles.ts +1 -2
  32. package/src/components/basic-section/SectionTable/SectionTable.tsx +12 -10
  33. package/src/components/dropdowns/MultiCombobox/MultiCombobox.stories.tsx +1 -1
  34. package/src/components/dropdowns/MultiCombobox/MultiCombobox.tsx +1 -1
  35. package/src/components/dropdowns/SingleCombobox/SingleCombobox.tsx +1 -1
  36. package/src/components/index.ts +2 -0
  37. package/src/components/inputs/DatePicker/DatePicker.stories.tsx +30 -0
  38. package/src/components/inputs/DatePicker/DatePicker.styles.ts +437 -0
  39. package/src/components/inputs/DatePicker/DatePicker.tsx +165 -0
  40. package/src/components/inputs/DatePicker/index.ts +1 -0
  41. package/src/components/inputs/EditableInput/EditableInput.tsx +1 -1
  42. package/src/components/inputs/NoInputDatePicker/NoInputDatePicker.stories.tsx +52 -0
  43. package/src/components/inputs/NoInputDatePicker/NoInputDatePicker.styles.ts +449 -0
  44. package/src/components/inputs/NoInputDatePicker/NoInputDatePicker.tsx +204 -0
  45. package/src/components/inputs/NoInputDatePicker/__tests__/NoInputDatePicker.test.tsx +126 -0
  46. package/src/components/inputs/NoInputDatePicker/index.ts +1 -0
  47. package/src/components/inputs/TextInput/TextInput.stories.tsx +1 -1
  48. package/src/components/inputs/index.ts +2 -0
  49. package/src/components/modals/ModalBase/ModalBase.styles.tsx +1 -1
  50. package/src/components/text-truncate/TextTruncate.test.tsx +3 -4
  51. package/src/components/text-truncate/TextTruncate.tsx +3 -2
  52. package/src/index.ts +2 -0
  53. package/src/styles/globals/forms.ts +1 -9
  54. package/src/styles/globals/tables.ts +1 -5
  55. package/src/utils/color.ts +139 -0
  56. package/src/utils/index.ts +5 -0
  57. package/src/utils/number.ts +29 -0
  58. package/src/utils/string.ts +87 -0
package/jest.config.js CHANGED
@@ -4,12 +4,11 @@ module.exports = {
4
4
  testEnvironment: 'jest-environment-jsdom',
5
5
  testPathIgnorePatterns: ['/node_modules/', '/lib/', '__mocks__'],
6
6
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
7
- moduleNameMapper: {
7
+ moduleNameMapper: {
8
8
  '^@/(.*)$': '<rootDir>/src/$1',
9
9
  },
10
10
  transform: {
11
11
  '^.+\\.(ts|tsx)?$': 'ts-jest',
12
12
  '^.+\\.(js|jsx)$': 'babel-jest',
13
13
  },
14
-
15
14
  };
@@ -15,7 +15,7 @@ declare const meta: {
15
15
  name: {
16
16
  control: {
17
17
  type: string;
18
- options: ("checkbox" | "ellipsis" | "help" | "pointer" | "text" | "zoom-in" | "zoom-out" | "reset" | "menu" | "search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "check-circle" | "circle-help" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list")[];
18
+ options: ("checkbox" | "ellipsis" | "help" | "pointer" | "text" | "zoom-in" | "zoom-out" | "reset" | "menu" | "search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "calendar" | "check-circle" | "circle-help" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list")[];
19
19
  };
20
20
  };
21
21
  };
@@ -26,7 +26,7 @@ declare const meta: {
26
26
  'data-testid'?: string | undefined;
27
27
  ariaLabel?: string | undefined;
28
28
  fill?: string | undefined;
29
- name: "checkbox" | "ellipsis" | "help" | "pointer" | "text" | "zoom-in" | "zoom-out" | "reset" | "menu" | "search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "check-circle" | "circle-help" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list";
29
+ name: "checkbox" | "ellipsis" | "help" | "pointer" | "text" | "zoom-in" | "zoom-out" | "reset" | "menu" | "search" | "split" | "indico-o-white" | "account" | "address" | "api-doc" | "arrow-dots" | "arrow-down" | "arrow-up-circle" | "arrows-cursor" | "bookmark" | "bookmarks" | "bookmark-saved" | "branch" | "calendar" | "check-circle" | "circle-help" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "classification-document" | "classification-image" | "classification-page" | "classify-and-unbundle" | "clipboard" | "coffee-1" | "coffee-2" | "coffee-fail" | "coffeecup" | "coffeesteam" | "cog" | "collection" | "compare" | "company-name" | "confidence-bar-1" | "confidence-bar-2" | "confidence-bar-3" | "confidence-bar-4" | "confidence-bars" | "configure" | "choose-library" | "crowdlabel" | "currency" | "dashboard" | "data-and-access" | "database" | "document" | "date" | "draggable" | "droplet" | "edit" | "education" | "elmos-fire" | "email" | "enterprise" | "exclamation-circle-stroke" | "extraction" | "eye" | "file" | "fileHappy" | "filter" | "filter-outline" | "folder" | "form" | "gallery" | "find-documents" | "graphiql" | "grid-view" | "happy" | "help-solid" | "highlight" | "highlight-outline" | "indico-logo-white" | "indico-o" | "info" | "kabob" | "key" | "label" | "layout-complex" | "layout-simple" | "list-view" | "libraries" | "location" | "logout" | "lock" | "model-import" | "model-starter" | "moon" | "moonbow" | "no-collections" | "no-libraries" | "no_results" | "no-format" | "object-detection" | "organizations" | "output" | "page-thumbnail" | "pay-as-you-go" | "person" | "phone" | "pin" | "plus" | "popup" | "price" | "preview-view" | "radio-button" | "recruiter" | "regex" | "reject" | "repair" | "research" | "retrain" | "sad" | "search-thin" | "shrug" | "signature" | "sort-down" | "step-forward" | "sun" | "surround" | "surround-outline" | "thumbs-down" | "thumbs-up" | "time" | "trash" | "unlock" | "upload" | "url" | "user" | "wand" | "warning" | "warning-stroke" | "workflows" | "x-close" | "fa-dot-circle" | "fa-file" | "fa-file-alt" | "fa-file-pdf" | "fa-file-word" | "fa-check-square" | "fa-square" | "fa-angle-double-left" | "fa-arrow-circle-right" | "fa-arrow-down" | "fa-arrow-left" | "fa-arrow-right" | "fa-arrow-up" | "fa-ban" | "fa-caret-down" | "fa-caret-up" | "fa-chart-bar" | "fa-check" | "fa-check-circle" | "fa-circle-notch" | "fa-clipboard" | "fa-clock" | "fa-clone" | "fa-cloud" | "fa-cog" | "fa-cogs" | "fa-coins" | "fa-cube" | "fa-cut" | "fa-download" | "fa-exclamation-circle" | "fa-exclamation-triangle" | "fa-external-link-alt" | "fa-eye-dropper" | "fa-file-download" | "fa-file-export" | "fa-file-upload" | "fa-filter" | "fa-ghost" | "fa-hat-wizard" | "fa-info-circle" | "fa-key" | "fa-keyboard" | "fa-layer-group" | "fa-pencil-alt" | "fa-plus" | "fa-plus-square" | "fa-question-circle" | "fa-robot" | "fa-search" | "fa-sign-out-alt" | "fa-sliders-h" | "fa-sync-alt" | "fa-tag" | "fa-times" | "fa-times-circle" | "fa-tint" | "fa-toggle-off" | "fa-toggle-on" | "fa-trash" | "fa-trash-alt" | "fa-undo" | "fa-user" | "fa-users" | "fa-mouse-pointer" | "fa-step-forward" | "fa-search-minus" | "fa-search-plus" | "fa-table" | "fa-image" | "fa-link" | "fa-list";
30
30
  size?: [string | number] | [string | number, string | number] | undefined;
31
31
  style?: any;
32
32
  onClick?: (() => void) | undefined;
@@ -11,6 +11,7 @@ declare const indicons: {
11
11
  bookmarks: import("react/jsx-runtime").JSX.Element;
12
12
  'bookmark-saved': import("react/jsx-runtime").JSX.Element;
13
13
  branch: import("react/jsx-runtime").JSX.Element;
14
+ calendar: import("react/jsx-runtime").JSX.Element;
14
15
  'check-circle': import("react/jsx-runtime").JSX.Element;
15
16
  'circle-help': import("react/jsx-runtime").JSX.Element;
16
17
  check: import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,3 @@
1
+ import { ListItem } from './types';
2
+ export declare const navigationItems: ListItem[];
3
+ export declare const footerItems: ListItem[];
@@ -3,7 +3,7 @@ export { Section, SectionBlock, SectionBody, SectionHeader, SectionTable } from
3
3
  export { Button, IconButton } from './buttons';
4
4
  export { BorderSelect, MultiCombobox, Select, SingleCombobox } from './dropdowns';
5
5
  export { Icon, faIcons, indicons } from './Icon';
6
- export { EditableInput, NumberInput, SearchInput, TextInput, Radio, RadioGroup, AbstractRadio, AbstractRadioGroup, } from './inputs';
6
+ export { EditableInput, NumberInput, SearchInput, TextInput, Radio, RadioGroup, AbstractRadio, AbstractRadioGroup, DatePicker, NoInputDatePicker, } from './inputs';
7
7
  export { BarSpinner, CirclePulse, CircleSpinner, LoadingList, PercentageRing, RandomLoadingMessage, LoadingIndicator, } from './loading-indicators';
8
8
  export { ListTable } from './ListTable';
9
9
  export { Pagination } from './Pagination';
@@ -0,0 +1,15 @@
1
+ import { PermafrostComponent } from '@/types';
2
+ type Props = PermafrostComponent & {
3
+ ariaLabel?: string;
4
+ disableBeforeDate?: Date;
5
+ disableAfterDate?: Date;
6
+ disabled?: boolean;
7
+ id: string;
8
+ label?: string;
9
+ onChange: (value: Date | undefined) => void;
10
+ placeholder?: string;
11
+ selected?: Date | undefined;
12
+ value: Date | undefined;
13
+ };
14
+ export declare const DatePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
15
+ export {};
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { DatePicker } from '@/components/inputs/DatePicker';
3
+ declare const meta: Meta<typeof DatePicker>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof DatePicker>;
6
+ export declare const Normal: Story;
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const StyledDatePicker: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
@@ -0,0 +1 @@
1
+ export { DatePicker } from './DatePicker';
@@ -0,0 +1,19 @@
1
+ import { DateRange } from 'react-day-picker';
2
+ import { IconName, PermafrostComponent } from '@/types';
3
+ type Props = PermafrostComponent & {
4
+ ariaLabel?: string;
5
+ disableBeforeDate?: Date;
6
+ disableAfterDate?: Date;
7
+ disabled?: boolean;
8
+ id: string;
9
+ label?: string;
10
+ onChange: (value: Date | DateRange | undefined) => void;
11
+ selected?: Date | undefined;
12
+ value: Date | undefined;
13
+ triggerIcon: IconName;
14
+ triggerIconSize: [string | number];
15
+ isRangePicker?: boolean;
16
+ isOpen?: boolean;
17
+ };
18
+ export declare const NoInputDatePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
19
+ export {};
@@ -0,0 +1,7 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { NoInputDatePicker } from '@/components/inputs/NoInputDatePicker';
3
+ declare const meta: Meta<typeof NoInputDatePicker>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof NoInputDatePicker>;
6
+ export declare const Single: Story;
7
+ export declare const Range: Story;
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const StyledNoInputDatePicker: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
@@ -0,0 +1 @@
1
+ export { NoInputDatePicker } from './NoInputDatePicker';
@@ -4,3 +4,5 @@ export { SearchInput } from './SearchInput';
4
4
  export { TextInput } from './TextInput';
5
5
  export { Radio, RadioGroup } from './RadioButtons';
6
6
  export { AbstractRadio, AbstractRadioGroup } from './RadioGroup';
7
+ export { DatePicker } from './DatePicker';
8
+ export { NoInputDatePicker } from './NoInputDatePicker';
@@ -1,7 +1,7 @@
1
1
  interface TextTruncateProps {
2
2
  string: string;
3
3
  maxChars: number;
4
- children: any;
4
+ children?: any;
5
5
  }
6
6
  export declare function TextTruncate({ string, maxChars, children }: TextTruncateProps): import("react/jsx-runtime").JSX.Element;
7
7
  export {};
package/lib/index.d.ts CHANGED
@@ -6,6 +6,7 @@ import * as styled_components from 'styled-components';
6
6
  import { PermafrostComponent, IconName } from '@/types';
7
7
  import { AriaButtonProps } from '@react-types/button';
8
8
  import { AriaRadioProps, RadioGroupProps as RadioGroupProps$1, AriaRadioGroupProps } from '@react-types/radio';
9
+ import { DateRange } from 'react-day-picker';
9
10
  import * as styled_components_dist_types from 'styled-components/dist/types';
10
11
 
11
12
  declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
@@ -98,6 +99,7 @@ declare const indicons: {
98
99
  bookmarks: react_jsx_runtime.JSX.Element;
99
100
  'bookmark-saved': react_jsx_runtime.JSX.Element;
100
101
  branch: react_jsx_runtime.JSX.Element;
102
+ calendar: react_jsx_runtime.JSX.Element;
101
103
  'check-circle': react_jsx_runtime.JSX.Element;
102
104
  'circle-help': react_jsx_runtime.JSX.Element;
103
105
  check: react_jsx_runtime.JSX.Element;
@@ -442,25 +444,25 @@ declare const allColors: {
442
444
  readonly backgroundColor: "#182432";
443
445
  };
444
446
 
445
- type Props$o = PermafrostComponent & {
447
+ type Props$q = PermafrostComponent & {
446
448
  content: React__default.ReactNode;
447
449
  header?: React__default.ReactNode | string;
448
450
  open?: boolean;
449
451
  };
450
- declare const Accordion: (props: Props$o) => react_jsx_runtime.JSX.Element;
452
+ declare const Accordion: (props: Props$q) => react_jsx_runtime.JSX.Element;
451
453
 
452
- type Props$n = PermafrostComponent & {
454
+ type Props$p = PermafrostComponent & {
453
455
  style?: object;
454
456
  children: React__default.ReactNode;
455
457
  };
456
- declare const Section: (props: Props$n) => react_jsx_runtime.JSX.Element;
458
+ declare const Section: (props: Props$p) => react_jsx_runtime.JSX.Element;
457
459
 
458
- type Props$m = PermafrostComponent & {
460
+ type Props$o = PermafrostComponent & {
459
461
  title?: string;
460
462
  style?: object;
461
463
  children: React__default.ReactNode;
462
464
  };
463
- declare const SectionBlock: (props: Props$m) => react_jsx_runtime.JSX.Element;
465
+ declare const SectionBlock: (props: Props$o) => react_jsx_runtime.JSX.Element;
464
466
 
465
467
  type SectionBodyProps = PermafrostComponent & {
466
468
  style?: object;
@@ -468,12 +470,12 @@ type SectionBodyProps = PermafrostComponent & {
468
470
  };
469
471
  declare const SectionBody: (props: SectionBodyProps) => react_jsx_runtime.JSX.Element;
470
472
 
471
- type Props$l = PermafrostComponent & {
473
+ type Props$n = PermafrostComponent & {
472
474
  style?: object;
473
475
  children?: React__default.ReactNode;
474
476
  };
475
477
  declare const SectionHeader: {
476
- (props: Props$l): react_jsx_runtime.JSX.Element;
478
+ (props: Props$n): react_jsx_runtime.JSX.Element;
477
479
  defaultProps: {
478
480
  className: string;
479
481
  style: {};
@@ -505,7 +507,7 @@ declare function Button(props: ButtonProps): React__default.ReactElement;
505
507
  type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
506
508
  type ButtonSize = 'normal' | 'large';
507
509
 
508
- type Props$k = PermafrostComponent & {
510
+ type Props$m = PermafrostComponent & {
509
511
  /**
510
512
  * Adjusts vertical alignment of the text label, in relation to the icon
511
513
  */
@@ -531,9 +533,9 @@ type Props$k = PermafrostComponent & {
531
533
  *
532
534
  * @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
533
535
  */
534
- declare function IconButton(props: Props$k): react_jsx_runtime.JSX.Element;
536
+ declare function IconButton(props: Props$m): react_jsx_runtime.JSX.Element;
535
537
 
536
- type Props$j = PermafrostComponent & {
538
+ type Props$l = PermafrostComponent & {
537
539
  defaultValue?: string;
538
540
  disabled?: boolean;
539
541
  horizontal?: boolean;
@@ -548,7 +550,7 @@ type Props$j = PermafrostComponent & {
548
550
  value?: string | number;
549
551
  validationErrors?: string[];
550
552
  };
551
- declare const BorderSelect: (props: Props$j) => react_jsx_runtime.JSX.Element;
553
+ declare const BorderSelect: (props: Props$l) => react_jsx_runtime.JSX.Element;
552
554
 
553
555
  type ComboboxProps = {
554
556
  'aria-label'?: string;
@@ -596,7 +598,7 @@ type ComboboxOption = {
596
598
  type ComboboxSize = 'small' | 'medium';
597
599
  type ComboboxVariant = 'default' | 'light';
598
600
 
599
- type Props$i = PermafrostComponent & {
601
+ type Props$k = PermafrostComponent & {
600
602
  disabled?: boolean;
601
603
  initialText?: string;
602
604
  options: {
@@ -610,7 +612,7 @@ type Props$i = PermafrostComponent & {
610
612
  onChange(e: React__default.ChangeEvent<HTMLSelectElement>): void;
611
613
  onClick?(e: React__default.MouseEvent<HTMLDivElement, MouseEvent>): void;
612
614
  };
613
- declare const Select: (props: Props$i) => react_jsx_runtime.JSX.Element;
615
+ declare const Select: (props: Props$k) => react_jsx_runtime.JSX.Element;
614
616
 
615
617
  /**
616
618
  * Multiselect combobox component. If selections are not bound to outside state
@@ -651,7 +653,7 @@ declare const SingleCombobox: React__default.ForwardRefExoticComponent<Permafros
651
653
  onChange: (selectedOption: ComboboxOption) => void;
652
654
  } & React__default.RefAttributes<unknown>>;
653
655
 
654
- type Props$h = PermafrostComponent & {
656
+ type Props$j = PermafrostComponent & {
655
657
  ariaLabel?: string;
656
658
  fill?: string;
657
659
  name: IconName;
@@ -663,9 +665,9 @@ type Props$h = PermafrostComponent & {
663
665
  * Generic icon component, hidden from Assistive Technology by default.
664
666
  * If icon should be available to AT, pass the desired name into the `ariaLabel` prop.
665
667
  */
666
- declare function Icon({ style, ...props }: Props$h): React__default.ReactElement | null;
668
+ declare function Icon({ style, ...props }: Props$j): React__default.ReactElement | null;
667
669
 
668
- type Props$g = PermafrostComponent & {
670
+ type Props$i = PermafrostComponent & {
669
671
  children: React__default.ReactNode | string;
670
672
  minLength?: number;
671
673
  onUpdate?(newValue: string): void;
@@ -674,9 +676,9 @@ type Props$g = PermafrostComponent & {
674
676
  * Wrapper component which enables text editing in place directly on a child component,
675
677
  * element, or plain text.
676
678
  */
677
- declare function EditableInput(props: Props$g): react_jsx_runtime.JSX.Element;
679
+ declare function EditableInput(props: Props$i): react_jsx_runtime.JSX.Element;
678
680
 
679
- type Props$f = PermafrostComponent & {
681
+ type Props$h = PermafrostComponent & {
680
682
  autoFocus?: boolean;
681
683
  decrement?(): void;
682
684
  disabled?: boolean;
@@ -696,9 +698,9 @@ type Props$f = PermafrostComponent & {
696
698
  * Basic numeric input field. A label is required, but may be visually hidden
697
699
  * using the `hiddenLabel` property.
698
700
  */
699
- declare function NumberInput(props: Props$f): React__default.ReactElement;
701
+ declare function NumberInput(props: Props$h): React__default.ReactElement;
700
702
 
701
- type Props$e = PermafrostComponent & {
703
+ type Props$g = PermafrostComponent & {
702
704
  border?: boolean;
703
705
  showClearInputIcon?: boolean;
704
706
  showSearchIcon?: boolean;
@@ -712,13 +714,13 @@ type Props$e = PermafrostComponent & {
712
714
  value?: string;
713
715
  };
714
716
  declare const SearchInput: {
715
- (props: Props$e): react_jsx_runtime.JSX.Element;
717
+ (props: Props$g): react_jsx_runtime.JSX.Element;
716
718
  defaultProps: {
717
719
  className: string;
718
720
  };
719
721
  };
720
722
 
721
- type Props$d = PermafrostComponent & {
723
+ type Props$f = PermafrostComponent & {
722
724
  autoComplete?: 'email' | 'current-password' | 'new-password' | string;
723
725
  autoFocus?: boolean;
724
726
  defaultValue?: string;
@@ -739,9 +741,9 @@ type Props$d = PermafrostComponent & {
739
741
  value?: string;
740
742
  readOnly?: boolean;
741
743
  };
742
- declare function TextInput(props: Props$d): React__default.ReactElement;
744
+ declare function TextInput(props: Props$f): React__default.ReactElement;
743
745
 
744
- type Props$c = {
746
+ type Props$e = {
745
747
  ['aria-label']: string;
746
748
  children?: React__default.ReactNode;
747
749
  hideFocusRing: boolean;
@@ -757,7 +759,7 @@ type Props$c = {
757
759
  * A group label must be included: either pass a string or markup into the
758
760
  * `label` prop, or include an `aria-label` or `aria-labelledby` attribute.
759
761
  */
760
- declare function RadioGroup$1({ children, ...props }: Props$c): react_jsx_runtime.JSX.Element;
762
+ declare function RadioGroup$1({ children, ...props }: Props$e): react_jsx_runtime.JSX.Element;
761
763
  /**
762
764
  * A single radio button and its label.
763
765
  */
@@ -786,6 +788,37 @@ declare function Radio(props: AriaRadioProps & {
786
788
  isVisuallySelected?: (selectedValue: string) => void;
787
789
  }): react_jsx_runtime.JSX.Element;
788
790
 
791
+ type Props$d = PermafrostComponent & {
792
+ ariaLabel?: string;
793
+ disableBeforeDate?: Date;
794
+ disableAfterDate?: Date;
795
+ disabled?: boolean;
796
+ id: string;
797
+ label?: string;
798
+ onChange: (value: Date | undefined) => void;
799
+ placeholder?: string;
800
+ selected?: Date | undefined;
801
+ value: Date | undefined;
802
+ };
803
+ declare const DatePicker: (props: Props$d) => react_jsx_runtime.JSX.Element;
804
+
805
+ type Props$c = PermafrostComponent & {
806
+ ariaLabel?: string;
807
+ disableBeforeDate?: Date;
808
+ disableAfterDate?: Date;
809
+ disabled?: boolean;
810
+ id: string;
811
+ label?: string;
812
+ onChange: (value: Date | DateRange | undefined) => void;
813
+ selected?: Date | undefined;
814
+ value: Date | undefined;
815
+ triggerIcon: IconName;
816
+ triggerIconSize: [string | number];
817
+ isRangePicker?: boolean;
818
+ isOpen?: boolean;
819
+ };
820
+ declare const NoInputDatePicker: (props: Props$c) => react_jsx_runtime.JSX.Element;
821
+
789
822
  type Props$b = PermafrostComponent & {
790
823
  ariaLabel?: string;
791
824
  size?: string;
@@ -1074,8 +1107,8 @@ declare const Drawer: (props: Props) => react_jsx_runtime.JSX.Element;
1074
1107
  interface TextTruncateProps {
1075
1108
  string: string;
1076
1109
  maxChars: number;
1077
- children: any;
1110
+ children?: any;
1078
1111
  }
1079
1112
  declare function TextTruncate({ string, maxChars, children }: TextTruncateProps): react_jsx_runtime.JSX.Element;
1080
1113
 
1081
- export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };
1114
+ export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };