@pega/cosmos-react-core 4.0.0-dev.11.1 → 4.0.0-dev.12.1
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/lib/components/AppShell/AppShell.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +0 -1
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/AppShell.types.d.ts +0 -1
- package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.types.js.map +1 -1
- package/lib/components/AppShell/NavigationList.d.ts.map +1 -1
- package/lib/components/AppShell/NavigationList.js +4 -3
- package/lib/components/AppShell/NavigationList.js.map +1 -1
- package/lib/components/Badges/Selection.d.ts.map +1 -1
- package/lib/components/Badges/Selection.js +9 -3
- package/lib/components/Badges/Selection.js.map +1 -1
- package/lib/components/Button/Button.d.ts.map +1 -1
- package/lib/components/Button/Button.js +6 -3
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Card/index.d.ts +0 -2
- package/lib/components/Card/index.d.ts.map +1 -1
- package/lib/components/Card/index.js +0 -1
- package/lib/components/Card/index.js.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
- package/lib/components/Configuration/Configuration.d.ts +1 -10
- package/lib/components/Configuration/Configuration.d.ts.map +1 -1
- package/lib/components/Configuration/Configuration.js +1 -3
- package/lib/components/Configuration/Configuration.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.d.ts +4 -0
- package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.js +4 -3
- package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.d.ts.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.js +2 -2
- package/lib/components/FieldGroup/FieldGroupList.js.map +1 -1
- package/lib/components/File/FileInput.d.ts +1 -2
- package/lib/components/File/FileInput.d.ts.map +1 -1
- package/lib/components/File/FileInput.js +2 -8
- package/lib/components/File/FileInput.js.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.js +2 -2
- package/lib/components/ListToolbar/ListToolbar.js.map +1 -1
- package/lib/components/MultiStepForm/FormProgress.styles.d.ts +10 -1
- package/lib/components/MultiStepForm/FormProgress.styles.d.ts.map +1 -1
- package/lib/components/MultiStepForm/FormProgress.styles.js +77 -20
- package/lib/components/MultiStepForm/FormProgress.styles.js.map +1 -1
- package/lib/components/MultiStepForm/HorizontalFormProgress.d.ts +11 -0
- package/lib/components/MultiStepForm/HorizontalFormProgress.d.ts.map +1 -0
- package/lib/components/MultiStepForm/{FormProgress.js → HorizontalFormProgress.js} +17 -4
- package/lib/components/MultiStepForm/HorizontalFormProgress.js.map +1 -0
- package/lib/components/MultiStepForm/MultiStepForm.d.ts.map +1 -1
- package/lib/components/MultiStepForm/MultiStepForm.js +50 -7
- package/lib/components/MultiStepForm/MultiStepForm.js.map +1 -1
- package/lib/components/MultiStepForm/MultiStepForm.types.d.ts +5 -0
- package/lib/components/MultiStepForm/MultiStepForm.types.d.ts.map +1 -1
- package/lib/components/MultiStepForm/MultiStepForm.types.js.map +1 -1
- package/lib/components/MultiStepForm/{FormProgress.d.ts → VerticalFormProgress.d.ts} +3 -3
- package/lib/components/MultiStepForm/VerticalFormProgress.d.ts.map +1 -0
- package/lib/components/MultiStepForm/VerticalFormProgress.js +18 -0
- package/lib/components/MultiStepForm/VerticalFormProgress.js.map +1 -0
- package/lib/components/PageTemplates/CategorySubPage.d.ts.map +1 -1
- package/lib/components/PageTemplates/CategorySubPage.js +1 -1
- package/lib/components/PageTemplates/CategorySubPage.js.map +1 -1
- package/lib/components/RadioCheck/RadioCheck.js +1 -1
- package/lib/components/RadioCheck/RadioCheck.js.map +1 -1
- package/lib/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/lib/components/SearchInput/SearchInput.js +21 -42
- package/lib/components/SearchInput/SearchInput.js.map +1 -1
- package/lib/components/SearchInput/SearchInput.styles.d.ts +1 -0
- package/lib/components/SearchInput/SearchInput.styles.d.ts.map +1 -1
- package/lib/components/SearchInput/SearchInput.styles.js +22 -0
- package/lib/components/SearchInput/SearchInput.styles.js.map +1 -1
- package/lib/components/Tabs/Tab.d.ts +0 -6
- package/lib/components/Tabs/Tab.d.ts.map +1 -1
- package/lib/components/Tabs/Tab.js +4 -6
- package/lib/components/Tabs/Tab.js.map +1 -1
- package/lib/components/Tabs/Tabs.d.ts.map +1 -1
- package/lib/components/Tabs/Tabs.js +2 -2
- package/lib/components/Tabs/Tabs.js.map +1 -1
- package/lib/components/Tabs/Tabs.types.d.ts +0 -5
- package/lib/components/Tabs/Tabs.types.d.ts.map +1 -1
- package/lib/components/Tabs/Tabs.types.js.map +1 -1
- package/lib/hooks/index.d.ts +0 -1
- package/lib/hooks/index.d.ts.map +1 -1
- package/lib/hooks/index.js +0 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useActiveDescendant.d.ts.map +1 -1
- package/lib/hooks/useActiveDescendant.js +3 -0
- package/lib/hooks/useActiveDescendant.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +1 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +1 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +1 -0
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +1 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/theme/theme.d.ts +0 -30
- package/lib/theme/theme.d.ts.map +1 -1
- package/lib/theme/themeDefinition.json +0 -14
- package/lib/theme/themeOverrides.schema.json +0 -24
- package/package.json +1 -1
- package/lib/components/Card/SelectableCard.d.ts +0 -21
- package/lib/components/Card/SelectableCard.d.ts.map +0 -1
- package/lib/components/Card/SelectableCard.js +0 -45
- package/lib/components/Card/SelectableCard.js.map +0 -1
- package/lib/components/MultiStepForm/FormProgress.d.ts.map +0 -1
- package/lib/components/MultiStepForm/FormProgress.js.map +0 -1
- package/lib/hooks/useOverride.d.ts +0 -7
- package/lib/hooks/useOverride.d.ts.map +0 -1
- package/lib/hooks/useOverride.js +0 -3
- package/lib/hooks/useOverride.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,UAAU,EAOX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,QAAQ,EAAE,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAsD3C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,CAA0B,SAAS,CAAC,SAAS,CAAC,CAAC,CACjG,CAAC,EACC,OAAO,EACP,IAAI,EACJ,OAAO,EACP,OAAO,EACP,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,eAAe,EAAE,gBAAgB,EACjC,OAAO,EAAE,EAAE,oBAAoB,EAAE,eAAe,EAAE,kBAAkB,EAAE,SAAS,EAAE,EACjF,UAAU,EAAE,EACV,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,aAAa,EAAE,cAAc,EAC9B,EACD,SAAS,EAAE,EACT,KAAK,EACL,MAAM,EAAE,EAAE,IAAI,EAAE,EACjB,EACD,kBAAkB,EAAE,eAAe,EACpC,EACD,UAAU,EAAE,EACV,MAAM,EAAE,EACN,KAAK,EACL,iBAAiB,EAAE,cAAc,EACjC,OAAO,EACP,eAAe,EAAE,YAAY,EAC7B,cAAc,EAAE,WAAW,EAC3B,cAAc,EAAE,WAAW,EAC3B,KAAK,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,EACjC,EACD,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAC3B,EACF,EACF,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC;IACpE,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3D,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,iBAAiB,GAAG,WAAW,CAAC,UAAU,CAAC;IACjD,MAAM,kBAAkB,GAAG,WAAW,CAAC,UAAU,CAAC;IAElD,MAAM,mBAAmB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;IAE7E,IAAI,WAAW,GAAG,aAAa,CAAC;IAChC,IAAI,qBAAqB,GAAG,KAAK,CAAC;IAClC,IAAI,OAAO,KAAK,WAAW,EAAE;QAC3B,WAAW,GAAG,KAAK,CAAC;QACpB,qBAAqB,GAAG,cAAc,CAAC;KACxC;SAAM,IAAI,OAAO,KAAK,QAAQ,EAAE;QAC/B,IAAI,IAAI,EAAE;YACR,WAAW,GAAG,cAAc,CAAC;YAC7B,qBAAqB,GAAG,aAAa,CAAC;SACvC;aAAM;YACL,WAAW,GAAG,KAAK,CAAC;YACpB,qBAAqB,GAAG,eAAe,CAAC;SACzC;KACF;SAAM,IAAI,OAAO,KAAK,MAAM,EAAE;QAC7B,WAAW,GAAG,SAAS,CAAC;QACxB,qBAAqB,GAAG,aAAa,CAAC;KACvC;SAAM,IAAI,OAAO,KAAK,MAAM,EAAE;QAC7B,WAAW,GAAG,SAAS,CAAC;QACxB,qBAAqB,GAAG,aAAa,CAAC;KACvC;IAED,OAAO,GAAG,CAAA;eACC,WAAW;0BACA,qBAAqB;iBAC9B,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa;;;;;wCAK5C,KAAK;oCACT,IAAI;;;QAGhC,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,MAAM;QACxC,CAAC,CAAC,GAAG,CAAA;;;sBAGS,WAAW,UAAU,WAAW;;WAE3C;QACH,CAAC,CAAC,GAAG,CAAA;;;;gBAIG,UAAU;;;WAGf;;;+BAGoB,OAAO;;;;YAI1B,aAAa;+BACM,OAAO;;;;;YAK1B,OAAO,KAAK,SAAS;QACvB,GAAG,CAAA;gCACmB,iBAAiB;qBAC5B,kBAAkB;;WAE5B;;YAEC,CAAC,OAAO,KAAK,WAAW,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9D,GAAG,CAAA;gCACmB,mBAAmB;;WAExC;;YAEC,OAAO,KAAK,QAAQ;QACtB,IAAI;QACJ,GAAG,CAAA;;;;0BAIa,WAAW;6BACR,WAAW;2BACb,WAAW;4BACV,WAAW;;;;;WAK5B;;YAEC,CAAC,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,MAAM,CAAC;QAC5C,GAAG,CAAA;;WAEF;;;;QAIH,OAAO,KAAK,MAAM;QACpB,OAAO,KAAK,MAAM;QAClB,GAAG,CAAA;sBACa,YAAY;qBACb,YAAY;8BACH,gBAAgB,MAAM,YAAY;;;OAGzD;;QAEC,OAAO;QACT,GAAG,CAAA;sBACa,cAAc;qBACf,cAAc;OAC5B;;QAEC,CAAC,IAAI;QACP,OAAO,KAAK,MAAM;QAClB,OAAO,KAAK,MAAM;QAClB,GAAG,CAAA;mBACU,OAAO;OACnB;;QAEC,OAAO,KAAK,MAAM;QACpB,OAAO,KAAK,MAAM;QAClB,GAAG,CAAA;;YAEG,CAAC,OAAO;YACV,GAAG,CAAA;0BACa,aAAa;yBACd,aAAa;WAC3B;gCACqB,gBAAgB,MAAM,YAAY;YACtD,CAAC,IAAI;YACP,GAAG,CAAA;uBACU,YAAY;WACxB;;OAEJ;;;;mBAIY,eAAe;;;;;;;sBAOZ,WAAW;;;QAGzB,IAAI;QACN,OAAO,KAAK,MAAM;QAClB,OAAO,KAAK,MAAM;QAClB,GAAG,CAAA;8BACqB,gBAAgB,MAAM,YAAY;;;;OAIzD;;QAEC,OAAO;QACT,GAAG,CAAA;UACC,cAAc;8BACM,qBAAqB;;;UAGzC,kBAAkB;;;;uCAIW,KAAK;;;OAGrC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,GAAkD,UAAU,CACtE,CACE,EACE,OAAO,GAAG,WAAW,EACrB,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,KAAK,EACf,IAAI,EACJ,EAAE,EACF,WAAW,EACX,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,SAAS,EACgC,EAC9C,GAA2B,EAC3B,EAAE;IACF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAE,CAAC;IAC7C,MAAM,cAAc,GAAG,MAAM,EAAc,CAAC;IAC5C,MAAM,SAAS,GAAG,kBAAkB,CAAoB,GAAG,EAAE,WAAW,CAAC,CAAC;IAC1E,MAAM,YAAY,GAAG,OAAO,IAAI,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,MAAM,CAAC;IAEzE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;QACrC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BACE,MAAC,YAAY,OACP,SAAS,EACb,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjC,WAAW,EAAE,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EACnD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IAAI,CAAC,IAAI,EAC3B,OAAO,EAAE,YAAY,gBACT,SAAS,IAAI,KAAK,EAC9B,WAAW,EAAE,CAAC,CAAoD,EAAE,EAAE;oBACnE,SAAS,CAAC,WAA6C,EAAE,CAAC,CAAC,CAAC,CAAC;oBAC9D,CAAC,CAAC,OAAO,EAAE,CAAC;oBACZ,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;gBAC7B,CAAC,EACD,SAAS,EAAE,CAAC,CAAoD,EAAE,EAAE;oBAClE,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC;oBACvF,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;oBAEnC,IAAI,WAAW,IAAI,SAAS,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE;wBAC/D,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;qBAC5B;oBAED,OAAQ,SAAS,CAAC,SAA2C,EAAE,CAAC,CAAC,CAAC,CAAC;gBACrE,CAAC,aAEA,YAAY,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,OAAO,GAAG,EAC7D,QAAQ,IACI,EACd,QAAQ,IAAI,KAAK,IAAI,CACpB,KAAC,OAAO,IAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,EAAC,cAAc,EAAE,KAAK,YAC/E,KAAK,GACE,CACX,IACA,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {\n useRef,\n useEffect,\n forwardRef,\n FunctionComponent,\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEvent,\n MouseEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { getHoverColors, omitProps } from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. */\n children: ReactNode;\n /**\n * Determines if the Button will be disabled.\n * @default false\n */\n disabled?: boolean;\n /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n href?: string;\n /**\n * Controls the styling of the Button.\n * @default \"secondary\"\n */\n variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n /**\n * Controls the behavior of a Button within a Form.\n * @default \"button\"\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: boolean;\n /**\n * Used for a smaller sized button.\n * @default false\n */\n compact?: boolean;\n /**\n * The label text will be used inside a Tooltip.\n */\n label?: string;\n /**\n * The aria label text will be inserted as the aria-label on the Button.\n */\n 'aria-label'?: string;\n /**\n * Optionally renders an indeterminate progress indicator in a button.\n * @default false\n */\n loading?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n ({\n variant,\n icon,\n loading,\n compact,\n theme: {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor, 'foreground-color': textColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: {\n color,\n 'secondary-color': secondaryColor,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n 'focus-shadow': focusShadow,\n touch: { padding: touchPadding }\n },\n link: { color: linkColor }\n }\n }\n }) => {\n const borderColor = variant === 'secondary' ? color : 'transparent';\n const contrastColor = tryCatch(() => readableColor(color));\n\n const hoverColors = getHoverColors(color);\n const hoverPrimaryColor = hoverColors.background;\n const hoverContrastColor = hoverColors.foreground;\n\n const secondaryHoverColor = tryCatch(() => mix(0.85, secondaryColor, color));\n\n let buttonColor = contrastColor;\n let buttonBackgroundColor = color;\n if (variant === 'secondary') {\n buttonColor = color;\n buttonBackgroundColor = secondaryColor;\n } else if (variant === 'simple') {\n if (icon) {\n buttonColor = 'currentColor';\n buttonBackgroundColor = 'transparent';\n } else {\n buttonColor = color;\n buttonBackgroundColor = backgroundColor;\n }\n } else if (variant === 'link') {\n buttonColor = linkColor;\n buttonBackgroundColor = 'transparent';\n } else if (variant === 'text') {\n buttonColor = textColor;\n buttonBackgroundColor = 'transparent';\n }\n\n return css`\n color: ${buttonColor};\n background-color: ${buttonBackgroundColor};\n display: ${variant === 'link' || variant === 'text' ? 'inline' : 'inline-flex'};\n align-items: center;\n outline: none;\n text-decoration: none;\n transition-property: background-color, color, box-shadow;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n ${variant !== 'link' && variant !== 'text'\n ? css`\n justify-content: center;\n line-height: 1;\n border: ${borderWidth} solid ${borderColor};\n position: relative;\n `\n : css`\n text-align: start;\n border: none;\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `}\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n @media (hover: hover) {\n &:hover {\n ${variant === 'primary' &&\n css`\n background-color: ${hoverPrimaryColor};\n color: ${hoverContrastColor};\n text-decoration: none;\n `}\n\n ${(variant === 'secondary' || (variant === 'simple' && !icon)) &&\n css`\n background-color: ${secondaryHoverColor};\n text-decoration: none;\n `}\n\n ${variant === 'simple' &&\n icon &&\n css`\n ::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.15;\n }\n `}\n\n ${(variant === 'link' || variant === 'text') &&\n css`\n text-decoration: underline;\n `}\n }\n }\n\n ${variant !== 'link' &&\n variant !== 'text' &&\n css`\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n `}\n\n ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `}\n\n ${!icon &&\n variant !== 'link' &&\n variant !== 'text' &&\n css`\n padding: ${padding};\n `}\n\n ${variant !== 'link' &&\n variant !== 'text' &&\n css`\n @media (pointer: coarse) {\n ${!compact &&\n css`\n min-height: ${hitAreaFinger};\n min-width: ${hitAreaFinger};\n `}\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n `}\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${focusShadow};\n }\n\n ${icon &&\n variant !== 'link' &&\n variant !== 'text' &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n > svg {\n display: block;\n }\n `}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: ${buttonBackgroundColor};\n border-radius: inherit;\n }\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(\n (\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n loading = false,\n children,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: Ref<HTMLButtonElement>\n ) => {\n const [buttonEl, setButtonEl] = useElement();\n const mouseDownEvent = useRef<MouseEvent>();\n const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n const showProgress = loading && variant !== 'link' && variant !== 'text';\n\n useEffect(() => {\n return () => {\n mouseDownEvent.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledButton\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n }}\n onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='local' />}\n {children}\n </StyledButton>\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n }\n);\n\nexport default Button;\n"]}
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useRef,\n useEffect,\n forwardRef,\n FunctionComponent,\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEvent,\n MouseEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { getHoverColors, omitProps, readableHue } from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. */\n children: ReactNode;\n /**\n * Determines if the Button will be disabled.\n * @default false\n */\n disabled?: boolean;\n /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n href?: string;\n /**\n * Controls the styling of the Button.\n * @default \"secondary\"\n */\n variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n /**\n * Controls the behavior of a Button within a Form.\n * @default \"button\"\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: boolean;\n /**\n * Used for a smaller sized button.\n * @default false\n */\n compact?: boolean;\n /**\n * The label text will be used inside a Tooltip.\n */\n label?: string;\n /**\n * The aria label text will be inserted as the aria-label on the Button.\n */\n 'aria-label'?: string;\n /**\n * Optionally renders an indeterminate progress indicator in a button.\n * @default false\n */\n loading?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n ({\n variant,\n icon,\n loading,\n compact,\n theme: {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor, 'foreground-color': textColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: {\n color,\n 'secondary-color': secondaryColor,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n 'focus-shadow': focusShadow,\n touch: { padding: touchPadding }\n },\n link: { color: linkColor }\n }\n }\n }) => {\n const borderColor = variant === 'secondary' ? color : 'transparent';\n const contrastColor = tryCatch(() => readableColor(color));\n\n const hoverColors = getHoverColors(color);\n const hoverPrimaryColor = hoverColors.background;\n const hoverContrastColor = hoverColors.foreground;\n\n const secondaryHoverBackgroundColor = tryCatch(() => mix(0.85, secondaryColor, color));\n const secondaryHoverForegroundColor = readableHue(\n color,\n secondaryHoverBackgroundColor ?? 'transparent'\n );\n\n let buttonColor = contrastColor;\n let buttonBackgroundColor = color;\n if (variant === 'secondary') {\n buttonColor = color;\n buttonBackgroundColor = secondaryColor;\n } else if (variant === 'simple') {\n if (icon) {\n buttonColor = 'currentColor';\n buttonBackgroundColor = 'transparent';\n } else {\n buttonColor = color;\n buttonBackgroundColor = backgroundColor;\n }\n } else if (variant === 'link') {\n buttonColor = linkColor;\n buttonBackgroundColor = 'transparent';\n } else if (variant === 'text') {\n buttonColor = textColor;\n buttonBackgroundColor = 'transparent';\n }\n\n return css`\n color: ${buttonColor};\n background-color: ${buttonBackgroundColor};\n display: ${variant === 'link' || variant === 'text' ? 'inline' : 'inline-flex'};\n align-items: center;\n outline: none;\n text-decoration: none;\n transition-property: background-color, color, box-shadow;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n ${variant !== 'link' && variant !== 'text'\n ? css`\n justify-content: center;\n line-height: 1;\n border: ${borderWidth} solid ${borderColor};\n position: relative;\n `\n : css`\n text-align: start;\n border: none;\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `}\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n @media (hover: hover) {\n &:hover {\n ${variant === 'primary' &&\n css`\n background-color: ${hoverPrimaryColor};\n color: ${hoverContrastColor};\n text-decoration: none;\n `}\n\n ${(variant === 'secondary' || (variant === 'simple' && !icon)) &&\n css`\n background-color: ${secondaryHoverBackgroundColor};\n color: ${secondaryHoverForegroundColor};\n border-color: ${secondaryHoverForegroundColor};\n text-decoration: none;\n `}\n\n ${variant === 'simple' &&\n icon &&\n css`\n ::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.15;\n }\n `}\n\n ${(variant === 'link' || variant === 'text') &&\n css`\n text-decoration: underline;\n `}\n }\n }\n\n ${variant !== 'link' &&\n variant !== 'text' &&\n css`\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n `}\n\n ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `}\n\n ${!icon &&\n variant !== 'link' &&\n variant !== 'text' &&\n css`\n padding: ${padding};\n `}\n\n ${variant !== 'link' &&\n variant !== 'text' &&\n css`\n @media (pointer: coarse) {\n ${!compact &&\n css`\n min-height: ${hitAreaFinger};\n min-width: ${hitAreaFinger};\n `}\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n `}\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${focusShadow};\n }\n\n ${icon &&\n variant !== 'link' &&\n variant !== 'text' &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n > svg {\n display: block;\n }\n `}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: ${buttonBackgroundColor};\n border-radius: inherit;\n }\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(\n (\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n loading = false,\n children,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: Ref<HTMLButtonElement>\n ) => {\n const [buttonEl, setButtonEl] = useElement();\n const mouseDownEvent = useRef<MouseEvent>();\n const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n const showProgress = loading && variant !== 'link' && variant !== 'text';\n\n useEffect(() => {\n return () => {\n mouseDownEvent.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledButton\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n }}\n onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='local' />}\n {children}\n </StyledButton>\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n }\n);\n\nexport default Button;\n"]}
|
|
@@ -11,6 +11,4 @@ export { default as CardMedia } from './CardMedia';
|
|
|
11
11
|
export { CardMediaProps } from './CardMedia';
|
|
12
12
|
export { default as CollapsibleCard } from './CollapsibleCard';
|
|
13
13
|
export { CollapsibleCardProps } from './CollapsibleCard';
|
|
14
|
-
export { default as SelectableCard } from './SelectableCard';
|
|
15
|
-
export { SelectableCardProps } from './SelectableCard';
|
|
16
14
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
|
|
@@ -5,5 +5,4 @@ export { default as CardFooter } from './CardFooter';
|
|
|
5
5
|
export { default as CardHeader } from './CardHeader';
|
|
6
6
|
export { default as CardMedia } from './CardMedia';
|
|
7
7
|
export { default as CollapsibleCard } from './CollapsibleCard';
|
|
8
|
-
export { default as SelectableCard } from './SelectableCard';
|
|
9
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './Card';\nexport { StyledCard } from './Card';\nexport { CardProps } from './Card';\nexport { default as CardContent } from './CardContent';\nexport { CardContentProps } from './CardContent';\nexport { default as CardFooter } from './CardFooter';\nexport { CardFooterProps } from './CardFooter';\nexport { default as CardHeader } from './CardHeader';\nexport { CardHeaderProps } from './CardHeader';\n\nexport { default as CardMedia } from './CardMedia';\nexport { CardMediaProps } from './CardMedia';\nexport { default as CollapsibleCard } from './CollapsibleCard';\nexport { CollapsibleCardProps } from './CollapsibleCard';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGA4BjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiB9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,yGA4BjC,CAAC;AAIH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA+N7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -154,7 +154,7 @@ const MultiSelectInput = forwardRef((props, ref) => {
|
|
|
154
154
|
}, tabIndex: '-1', "aria-label": `${t('remove')} ${element.text}`, "aria-describedby": ariaDescribedBy, children: element.text }, element.id));
|
|
155
155
|
}) })), _jsx(Flex, { item: { grow: 1 }, as: 'input', size: 1, ref: inputRef, value: value,
|
|
156
156
|
// no-op avoids react uncontrolled warning
|
|
157
|
-
onChange: onChange || (() => { }), onKeyDown: onInputKeyDown, readOnly: readOnly || !onChange, disabled: disabled, placeholder: selected?.length ? undefined : placeholder, autoComplete: 'off', autoFocus: autoFocus, "aria-controls": !pauseDescendantEvaluation ? id : ariaControls, ...restProps })] }), actions, _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, children: t('combobox_search_instructions') })] }));
|
|
157
|
+
onChange: onChange || (() => { }), onKeyDown: onInputKeyDown, readOnly: readOnly || !onChange, disabled: disabled, placeholder: selected?.length ? undefined : placeholder, autoComplete: 'off', autoFocus: autoFocus, "aria-controls": !pauseDescendantEvaluation ? id : ariaControls, ...restProps, required: undefined })] }), actions, _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, children: t('combobox_search_instructions') })] }));
|
|
158
158
|
});
|
|
159
159
|
export default MultiSelectInput;
|
|
160
160
|
//# sourceMappingURL=MultiSelectInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n KeyboardEvent,\n useRef,\n useCallback,\n useMemo,\n useState,\n useEffect,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n useConsolidatedRef,\n useActiveDescendant,\n useDirection,\n useI18n,\n useUID\n} from '../../../hooks';\nimport { cap, tryCatch } from '../../../utils';\nimport { StyledBareButton } from '../../Button/BareButton';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n const { background } = theme.components.badges.selectable.base;\n const { 'foreground-color': foreground } = theme.base.palette;\n const boxShadowColor = tryCatch(() => transparentize(0.45, foreground));\n\n return css`\n cursor: text;\n\n ul {\n list-style: none;\n display: contents;\n\n &[data-active-scope='true'] ${StyledSelectable}[data-current='true'] {\n color: ${theme.base.palette.interactive};\n box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n outline: none;\n\n ${StyledBareButton} {\n color: ${theme.base.palette.interactive};\n }\n }\n }\n\n input {\n width: 8ch;\n height: 1.125rem;\n }\n `;\n});\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const {\n selected = [],\n value,\n onRemove,\n onChange,\n onKeyDown,\n onResolveSuggestion,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n pauseDescendantEvaluation,\n onSelectedFocus,\n onSelectedBlur,\n 'aria-controls': ariaControls,\n ...restProps\n } = props;\n const t = useI18n();\n const id = useUID();\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n const [activeItemId, setActiveItemId] = useState<string | null>(null);\n const { start, end } = useDirection();\n\n const uadConfig = useMemo(\n () => ({\n focusEl: inputRef.current,\n scope: listRef.current,\n selector: 'li[role=\"option\"]',\n orientation: 'horizontal' as const,\n focusReturnEl: focusDescendant,\n clearFocusReturn: () => {\n setFocusDescendant(null);\n },\n pauseDescendantEvaluation,\n onClick: (el: HTMLElement) => {\n el.click();\n }\n }),\n [pauseDescendantEvaluation, selected, focusDescendant]\n );\n\n const { activeDescendant } = useActiveDescendant(uadConfig, [selected]);\n\n const handleSelectedRemoval = useCallback(\n (selectionId, idx) => {\n if (!pauseDescendantEvaluation) {\n if (idx === selected.length - 1) {\n // If removing last selected item\n if (selected.length > 1) {\n // If other selected items, focus previous\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n null\n );\n } else {\n // Blur selected if final only item removed\n onSelectedBlur?.();\n }\n } else if (selected.length > 1) {\n // If not last item removed and other selected items, focus next\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx + 1] as HTMLElement) ||\n null\n );\n }\n }\n onRemove?.(selectionId, idx);\n inputRef.current?.focus();\n },\n [selected, onRemove, onSelectedBlur, uadConfig]\n );\n\n useEffect(() => {\n // Maintain active item & prev. val only as it changes.\n if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n setActiveItemId(activeDescendant.id);\n }\n }, [activeDescendant]);\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (selected.length && inputRef.current?.selectionStart === 0) {\n const lastIndex = selected.length - 1;\n if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n null\n );\n onSelectedFocus?.();\n }\n\n const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n ?.id;\n const onLastItem = activeItemId === lastSelectableId;\n\n if (\n !pauseDescendantEvaluation &&\n ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n ) {\n onSelectedBlur?.();\n }\n\n if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n }\n }\n onKeyDown?.(e);\n },\n [\n pauseDescendantEvaluation,\n activeItemId,\n onKeyDown,\n handleSelectedRemoval,\n selected,\n readOnly,\n disabled\n ]\n );\n\n const ariaDescribedBy = useMemo(() => {\n return onChange\n ? `${id}-inputDescription ${id}-searchDescription`\n : `${id}-inputDescription`;\n }, [id]);\n\n return (\n <Flex\n as={StyledMultiSelectInput}\n forwardedAs={StyledFormControl}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', justify: 'between' }}\n {...{\n readOnly,\n disabled,\n status\n }}\n >\n <Flex\n container={{ alignContent: 'center', wrap: 'wrap', rowGap: 0.5, colGap: 0.25, pad: 0.25 }}\n item={{ grow: 1 }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n if (\n e.target instanceof HTMLElement &&\n !e.currentTarget.contains(e.target.closest('li'))\n ) {\n inputRef.current?.focus();\n inputRef.current?.click();\n }\n }}\n >\n {selected.length > 0 && (\n <ul ref={listRef} id={id} role='listbox' aria-label={t('selected_items')}>\n {selected.map((element, idx) => {\n return (\n <Selectable\n as='li'\n key={element.id}\n role='option'\n id={element.id.toString()}\n status={status}\n onClick={e => {\n const mouseClick = e.detail !== 0;\n\n if (!readOnly && !disabled && !mouseClick) {\n handleSelectedRemoval(element.id, idx);\n }\n }}\n onRemove={() => {\n if (!readOnly && !disabled) {\n handleSelectedRemoval(element.id, idx);\n }\n }}\n onKeyDown={(e: KeyboardEvent<Element>) => {\n // prevent browser's Back on FF\n if (e.key === 'Backspace') e.preventDefault();\n }}\n tabIndex='-1'\n aria-label={`${t('remove')} ${element.text}`}\n aria-describedby={ariaDescribedBy}\n >\n {element.text}\n </Selectable>\n );\n })}\n </ul>\n )}\n <Flex\n item={{ grow: 1 }}\n as='input'\n size={1}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange || (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly || !onChange}\n disabled={disabled}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='off'\n autoFocus={autoFocus}\n aria-controls={!pauseDescendantEvaluation ? id : ariaControls}\n {...restProps}\n />\n </Flex>\n {actions}\n\n <VisuallyHiddenText id={`${id}-inputDescription`}>\n {`${t('combobox_open_close')} `}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-searchDescription`}>\n {t('combobox_search_instructions')}\n </VisuallyHiddenText>\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}
|
|
1
|
+
{"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n KeyboardEvent,\n useRef,\n useCallback,\n useMemo,\n useState,\n useEffect,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable, { StyledSelectable } from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n useConsolidatedRef,\n useActiveDescendant,\n useDirection,\n useI18n,\n useUID\n} from '../../../hooks';\nimport { cap, tryCatch } from '../../../utils';\nimport { StyledBareButton } from '../../Button/BareButton';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\n\nimport { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)(({ theme }) => {\n const { background } = theme.components.badges.selectable.base;\n const { 'foreground-color': foreground } = theme.base.palette;\n const boxShadowColor = tryCatch(() => transparentize(0.45, foreground));\n\n return css`\n cursor: text;\n\n ul {\n list-style: none;\n display: contents;\n\n &[data-active-scope='true'] ${StyledSelectable}[data-current='true'] {\n color: ${theme.base.palette.interactive};\n box-shadow: 0 0 0.5rem -0.125rem ${boxShadowColor}, inset 0 0 0 0.125rem ${background};\n outline: none;\n\n ${StyledBareButton} {\n color: ${theme.base.palette.interactive};\n }\n }\n }\n\n input {\n width: 8ch;\n height: 1.125rem;\n }\n `;\n});\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MultiSelectInputProps>, ref: Ref<HTMLInputElement>) => {\n const {\n selected = [],\n value,\n onRemove,\n onChange,\n onKeyDown,\n onResolveSuggestion,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n pauseDescendantEvaluation,\n onSelectedFocus,\n onSelectedBlur,\n 'aria-controls': ariaControls,\n ...restProps\n } = props;\n const t = useI18n();\n const id = useUID();\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement | null>(null);\n const [activeItemId, setActiveItemId] = useState<string | null>(null);\n const { start, end } = useDirection();\n\n const uadConfig = useMemo(\n () => ({\n focusEl: inputRef.current,\n scope: listRef.current,\n selector: 'li[role=\"option\"]',\n orientation: 'horizontal' as const,\n focusReturnEl: focusDescendant,\n clearFocusReturn: () => {\n setFocusDescendant(null);\n },\n pauseDescendantEvaluation,\n onClick: (el: HTMLElement) => {\n el.click();\n }\n }),\n [pauseDescendantEvaluation, selected, focusDescendant]\n );\n\n const { activeDescendant } = useActiveDescendant(uadConfig, [selected]);\n\n const handleSelectedRemoval = useCallback(\n (selectionId, idx) => {\n if (!pauseDescendantEvaluation) {\n if (idx === selected.length - 1) {\n // If removing last selected item\n if (selected.length > 1) {\n // If other selected items, focus previous\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) ||\n null\n );\n } else {\n // Blur selected if final only item removed\n onSelectedBlur?.();\n }\n } else if (selected.length > 1) {\n // If not last item removed and other selected items, focus next\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx + 1] as HTMLElement) ||\n null\n );\n }\n }\n onRemove?.(selectionId, idx);\n inputRef.current?.focus();\n },\n [selected, onRemove, onSelectedBlur, uadConfig]\n );\n\n useEffect(() => {\n // Maintain active item & prev. val only as it changes.\n if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n setActiveItemId(activeDescendant.id);\n }\n }, [activeDescendant]);\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (selected.length && inputRef.current?.selectionStart === 0) {\n const lastIndex = selected.length - 1;\n if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) ||\n null\n );\n onSelectedFocus?.();\n }\n\n const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n ?.id;\n const onLastItem = activeItemId === lastSelectableId;\n\n if (\n !pauseDescendantEvaluation &&\n ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')\n ) {\n onSelectedBlur?.();\n }\n\n if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {\n handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n }\n }\n onKeyDown?.(e);\n },\n [\n pauseDescendantEvaluation,\n activeItemId,\n onKeyDown,\n handleSelectedRemoval,\n selected,\n readOnly,\n disabled\n ]\n );\n\n const ariaDescribedBy = useMemo(() => {\n return onChange\n ? `${id}-inputDescription ${id}-searchDescription`\n : `${id}-inputDescription`;\n }, [id]);\n\n return (\n <Flex\n as={StyledMultiSelectInput}\n forwardedAs={StyledFormControl}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', justify: 'between' }}\n {...{\n readOnly,\n disabled,\n status\n }}\n >\n <Flex\n container={{ alignContent: 'center', wrap: 'wrap', rowGap: 0.5, colGap: 0.25, pad: 0.25 }}\n item={{ grow: 1 }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n if (\n e.target instanceof HTMLElement &&\n !e.currentTarget.contains(e.target.closest('li'))\n ) {\n inputRef.current?.focus();\n inputRef.current?.click();\n }\n }}\n >\n {selected.length > 0 && (\n <ul ref={listRef} id={id} role='listbox' aria-label={t('selected_items')}>\n {selected.map((element, idx) => {\n return (\n <Selectable\n as='li'\n key={element.id}\n role='option'\n id={element.id.toString()}\n status={status}\n onClick={e => {\n const mouseClick = e.detail !== 0;\n\n if (!readOnly && !disabled && !mouseClick) {\n handleSelectedRemoval(element.id, idx);\n }\n }}\n onRemove={() => {\n if (!readOnly && !disabled) {\n handleSelectedRemoval(element.id, idx);\n }\n }}\n onKeyDown={(e: KeyboardEvent<Element>) => {\n // prevent browser's Back on FF\n if (e.key === 'Backspace') e.preventDefault();\n }}\n tabIndex='-1'\n aria-label={`${t('remove')} ${element.text}`}\n aria-describedby={ariaDescribedBy}\n >\n {element.text}\n </Selectable>\n );\n })}\n </ul>\n )}\n <Flex\n item={{ grow: 1 }}\n as='input'\n size={1}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange || (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly || !onChange}\n disabled={disabled}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='off'\n autoFocus={autoFocus}\n aria-controls={!pauseDescendantEvaluation ? id : ariaControls}\n {...restProps}\n required={undefined}\n />\n </Flex>\n {actions}\n\n <VisuallyHiddenText id={`${id}-inputDescription`}>\n {`${t('combobox_open_close')} `}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-searchDescription`}>\n {t('combobox_search_instructions')}\n </VisuallyHiddenText>\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { FunctionComponent,
|
|
1
|
+
import { FunctionComponent, ReactNode, Context, MutableRefObject } from 'react';
|
|
2
2
|
import { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';
|
|
3
3
|
import { Translation, TranslationPack } from '../../i18n';
|
|
4
|
-
import { FileInputProps } from '../File';
|
|
5
4
|
import '../../init';
|
|
6
5
|
export interface ConfigurationProps {
|
|
7
6
|
/**
|
|
@@ -36,13 +35,6 @@ export interface ConfigurationProps {
|
|
|
36
35
|
* Target element for rendering a `ReactDOM` portal.
|
|
37
36
|
*/
|
|
38
37
|
portalTarget?: Element;
|
|
39
|
-
/**
|
|
40
|
-
* Override map to replace Cosmos components.
|
|
41
|
-
* @deprecated
|
|
42
|
-
*/
|
|
43
|
-
overrideMap?: {
|
|
44
|
-
FileInput?: ComponentType<FileInputProps>;
|
|
45
|
-
};
|
|
46
38
|
/**
|
|
47
39
|
* Use native HTML5 controls for inputs instead of rich ones.
|
|
48
40
|
* @default false
|
|
@@ -60,7 +52,6 @@ export interface ConfigurationContextValue {
|
|
|
60
52
|
themeMachine: ThemeMachineLike<DefaultThemeDefinition>;
|
|
61
53
|
styleSheetTarget?: HTMLElement;
|
|
62
54
|
portalTarget?: Element;
|
|
63
|
-
overrideMap: NonNullable<ConfigurationProps['overrideMap']>;
|
|
64
55
|
loadedRef: MutableRefObject<boolean>;
|
|
65
56
|
renderNativeControls: boolean;
|
|
66
57
|
/** @internal */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EACjB,
|
|
1
|
+
{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EACjB,SAAS,EAIT,OAAO,EACP,gBAAgB,EACjB,MAAM,OAAO,CAAC;AAKf,OAAO,EAEL,gBAAgB,EAEhB,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAEL,WAAW,EACX,eAAe,EAGhB,MAAM,YAAY,CAAC;AAGpB,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,eAAe,CAAC;IAC9B,YAAY,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrC,oBAAoB,EAAE,OAAO,CAAC;IAC9B,gBAAgB;IAChB,WAAW,EAAE,OAAO,CAAC;CACtB;AAID,eAAO,MAAM,oBAAoB,oCAU/B,CAAC;AAIH,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AA4BD,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;QAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;KAC3D;CACF;AAUD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CA8ExD,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -16,7 +16,6 @@ export const ConfigurationContext = createContext({
|
|
|
16
16
|
themeMachine: BaseThemeMachine,
|
|
17
17
|
styleSheetTarget: documentIsAvailable ? document.head : undefined,
|
|
18
18
|
portalTarget: documentIsAvailable ? document.body : undefined,
|
|
19
|
-
overrideMap: {},
|
|
20
19
|
loadedRef: { current: false },
|
|
21
20
|
renderNativeControls: false,
|
|
22
21
|
initialized: false
|
|
@@ -48,7 +47,7 @@ if (windowIsAvailable) {
|
|
|
48
47
|
}
|
|
49
48
|
window.cosmos.instances.push(instance);
|
|
50
49
|
}
|
|
51
|
-
const Configuration = ({ children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheetTarget, portalTarget,
|
|
50
|
+
const Configuration = ({ children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheetTarget, portalTarget, renderNativeControls, id }) => {
|
|
52
51
|
const context = windowIsAvailable
|
|
53
52
|
? window.cosmos.configurationContext ?? ConfigurationContext
|
|
54
53
|
: ConfigurationContext;
|
|
@@ -79,7 +78,6 @@ const Configuration = ({ children, locale, direction, translations: customTransl
|
|
|
79
78
|
themeMachine,
|
|
80
79
|
styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,
|
|
81
80
|
portalTarget: portalTarget ?? ctx.portalTarget,
|
|
82
|
-
overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,
|
|
83
81
|
loadedRef: ctx.loadedRef,
|
|
84
82
|
renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,
|
|
85
83
|
initialized: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EAIV,OAAO,EACP,QAAQ,EACR,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EACL,YAAY,EAEZ,gBAAgB,EAGjB,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,qBAAqB,EAGrB,kBAAkB,EAClB,SAAS,IAAI,iBAAiB,EAC/B,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAC3F,OAAO,GAAG,MAAM,uBAAuB,CAAC;AACxC,OAAO,YAAY,CAAC;AAmEpB,MAAM,aAAa,GAAG,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;AAEvE,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA4B;IAC3E,MAAM,EAAE,aAAa;IACrB,SAAS,EAAE,iBAAiB,CAAC,aAAa,CAAC;IAC3C,YAAY,EAAE,kBAAkB;IAChC,YAAY,EAAE,gBAAgB;IAC9B,gBAAgB,EAAE,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;IACjE,YAAY,EAAE,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;IAC7D,WAAW,EAAE,EAAE;IACf,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;IAC7B,oBAAoB,EAAE,KAAK;IAC3B,WAAW,EAAE,KAAK;CACnB,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,IAAI,GAAG,EAAU,CAAC;AASzC,MAAM,QAAQ,GAAmB;IAC/B,OAAO,EAAE,GAAG,CAAC,OAAO;IACpB,cAAc,EAAE,EAAE;IAClB,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;IAClC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,QAAQ,CAAC,cAAc,GAAG,CAAC,GAAG,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC;IAEnF,MAAM,WAAW,GAAG,GAAG,CAAC,WAAW,IAAI,SAAS,CAAC;IAEjD,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAEtC,IAAI,CAAC,CAAC,WAAW,IAAI,QAAQ,CAAC,UAAU,CAAC,EAAE;QACzC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACtC;IACD,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;IACpC,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,QAAQ,CAAC,cAAc,GAAG,CAAC,GAAG,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC;AACrF,CAAC,CAAC;AASF,IAAI,iBAAiB,EAAE;IACrB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;QAC5B,MAAM,CAAC,MAAM,CAAC,SAAS,GAAG,EAAE,CAAC;KAC9B;IAED,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;CACxC;AAED,MAAM,aAAa,GAA0C,CAAC,EAC5D,QAAQ,EACR,MAAM,EACN,SAAS,EACT,YAAY,EAAE,kBAAkB,EAChC,KAAK,EACL,yBAAyB,EACzB,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,oBAAoB,EACpB,EAAE,EACiB,EAAE,EAAE;IACvB,MAAM,OAAO,GAAG,iBAAiB;QAC/B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,oBAAoB,IAAI,oBAAoB;QAC5D,CAAC,CAAC,oBAAoB,CAAC;IACzB,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,KAAK;QACxB,CAAC,CAAC,IAAI,YAAY,CAAyB,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC;QAC/E,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC;IACrB,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,qBAAqB,CAAC,EAAE,GAAG,GAAG,CAAC,YAAY,EAAE,GAAG,kBAAkB,EAAE,CAAC,EAC3E,CAAC,GAAG,CAAC,YAAY,EAAE,kBAAkB,CAAC,CACvC,CAAC;IAEF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;QACvB,WAAW,CAAC,GAAG,CAAC,CAAC;QAEjB,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,GAAG,CAAC,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAET,MAAM,eAAe,GAAG,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CACxC,QAAQ,CACT,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAAC,qBAAqB,QAAC,MAAM,EAAE,gBAAgB,IAAI,GAAG,CAAC,gBAAgB,YACvF,8BACG,CAAC,yBAAyB;oBACzB,OAAO;oBACP,mBAAmB;oBACnB,YAAY,CACV,eACE,GAAG,EAAC,YAAY,EAChB,IAAI,EAAC,iGAAiG,qCAEtG,EACF,gBAAgB,IAAI,GAAG,CAAC,gBAAgB,IAAI,QAAQ,CAAC,IAAI,CAC1D,EACH,KAAC,WAAW,KAAG,EACd,QAAQ,IACR,GACe,CACrB,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,CAAC,QAAQ,IACf,KAAK,EAAE;YACL,MAAM,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM;YAC5B,SAAS,EAAE,SAAS,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC;YAC1F,YAAY;YACZ,YAAY;YACZ,gBAAgB,EAAE,gBAAgB,IAAI,GAAG,CAAC,gBAAgB;YAC1D,YAAY,EAAE,YAAY,IAAI,GAAG,CAAC,YAAY;YAC9C,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW;YACnF,SAAS,EAAE,GAAG,CAAC,SAAS;YACxB,oBAAoB,EAAE,oBAAoB,IAAI,GAAG,CAAC,oBAAoB;YACtE,WAAW,EAAE,IAAI;SAClB,YAED,KAAC,aAAa,IAAC,KAAK,EAAE,YAAY,CAAC,KAAK,YAAG,eAAe,GAAiB,GAC1D,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n createContext,\n useContext,\n FunctionComponent,\n ComponentType,\n ReactNode,\n useMemo,\n useState,\n useEffect,\n Context,\n MutableRefObject\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n ThemeMachine,\n ThemeMachineLike,\n BaseThemeMachine,\n DefaultSettableTheme,\n DefaultThemeDefinition\n} from '../../theme';\nimport {\n createTranslationPack,\n Translation,\n TranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport { FileInputProps } from '../File';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport '../../init';\n\nexport interface ConfigurationProps {\n /**\n * Any components or nodes that should be impacted by the settings applied by this Configuration component.\n */\n children: ReactNode;\n /**\n * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n */\n locale?: string;\n /**\n * Override rendering direction of the document. Direction will be based on the locale if now provided.\n */\n direction?: 'ltr' | 'rtl';\n /**\n * Object with (partial) translations.\n */\n translations?: Translation;\n /**\n * Theme object used to override any or all Cosmos theme properties.\n */\n theme?: DefaultSettableTheme;\n /**\n * Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n */\n disableDefaultFontLoading?: boolean;\n /**\n * Target element for loading styles related to `styled-components`.\n */\n styleSheetTarget?: HTMLElement;\n /**\n * Target element for rendering a `ReactDOM` portal.\n */\n portalTarget?: Element;\n /**\n * Override map to replace Cosmos components.\n * @deprecated\n */\n overrideMap?: {\n FileInput?: ComponentType<FileInputProps>;\n };\n /**\n * Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n /**\n * String to identify this configuration instance.\n */\n id?: string;\n}\n\nexport interface ConfigurationContextValue {\n locale: string;\n direction: ConfigurationProps['direction'];\n translations: TranslationPack;\n themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n styleSheetTarget?: HTMLElement;\n portalTarget?: Element;\n overrideMap: NonNullable<ConfigurationProps['overrideMap']>;\n loadedRef: MutableRefObject<boolean>;\n renderNativeControls: boolean;\n /** @internal */\n initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n overrideMap: {},\n loadedRef: { current: false },\n renderNativeControls: false,\n initialized: false\n});\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance {\n version: string;\n mountedConfigs: string[];\n mountOrder: string[];\n mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n version: pkg.version,\n mountedConfigs: [],\n mountOrder: [],\n mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n mountedConfigs.add(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n const description = sym.description ?? 'Unknown';\n\n instance.mountOrder.push(description);\n\n if (!(description in instance.mountCount)) {\n instance.mountCount[description] = 0;\n }\n instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n mountedConfigs.delete(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n instances?: CosmosInstance[];\n configurationContext?: Context<ConfigurationContextValue>;\n }\n}\n\nif (windowIsAvailable) {\n if (!window.cosmos.instances) {\n window.cosmos.instances = [];\n }\n\n window.cosmos.instances.push(instance);\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheetTarget,\n portalTarget,\n overrideMap,\n renderNativeControls,\n id\n}: ConfigurationProps) => {\n const context = windowIsAvailable\n ? window.cosmos.configurationContext ?? ConfigurationContext\n : ConfigurationContext;\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n const sym = Symbol(id);\n mountConfig(sym);\n\n return () => {\n unmountConfig(sym);\n };\n }, [id]);\n\n const wrappedChildren = ctx.initialized ? (\n children\n ) : (\n <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n <>\n {!disableDefaultFontLoading &&\n mounted &&\n documentIsAvailable &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap'\n data-cosmos-global-style\n />,\n styleSheetTarget ?? ctx.styleSheetTarget ?? document.head\n )}\n <GlobalStyle />\n {children}\n </>\n </StyleSheetManager>\n );\n\n return (\n <context.Provider\n value={{\n locale: locale ?? ctx.locale,\n direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n portalTarget: portalTarget ?? ctx.portalTarget,\n overrideMap: overrideMap ? { ...ctx.overrideMap, ...overrideMap } : ctx.overrideMap,\n loadedRef: ctx.loadedRef,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n initialized: true\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n </context.Provider>\n );\n};\n\nexport default Configuration;\n"]}
|
|
1
|
+
{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n FunctionComponent,\n ReactNode,\n useMemo,\n useState,\n useEffect,\n Context,\n MutableRefObject\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\n\nimport { GlobalStyle } from '../../styles';\nimport {\n ThemeMachine,\n ThemeMachineLike,\n BaseThemeMachine,\n DefaultSettableTheme,\n DefaultThemeDefinition\n} from '../../theme';\nimport {\n createTranslationPack,\n Translation,\n TranslationPack,\n DefaultTranslation,\n direction as directionOfLocale\n} from '../../i18n';\nimport { windowIsAvailable, navigatorIsAvailable, documentIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport '../../init';\n\nexport interface ConfigurationProps {\n /**\n * Any components or nodes that should be impacted by the settings applied by this Configuration component.\n */\n children: ReactNode;\n /**\n * User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php).\n */\n locale?: string;\n /**\n * Override rendering direction of the document. Direction will be based on the locale if now provided.\n */\n direction?: 'ltr' | 'rtl';\n /**\n * Object with (partial) translations.\n */\n translations?: Translation;\n /**\n * Theme object used to override any or all Cosmos theme properties.\n */\n theme?: DefaultSettableTheme;\n /**\n * Disables loading Open Sans from Google Fonts. Only takes effect on the root configuration.\n */\n disableDefaultFontLoading?: boolean;\n /**\n * Target element for loading styles related to `styled-components`.\n */\n styleSheetTarget?: HTMLElement;\n /**\n * Target element for rendering a `ReactDOM` portal.\n */\n portalTarget?: Element;\n /**\n * Use native HTML5 controls for inputs instead of rich ones.\n * @default false\n */\n renderNativeControls?: boolean;\n /**\n * String to identify this configuration instance.\n */\n id?: string;\n}\n\nexport interface ConfigurationContextValue {\n locale: string;\n direction: ConfigurationProps['direction'];\n translations: TranslationPack;\n themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n styleSheetTarget?: HTMLElement;\n portalTarget?: Element;\n loadedRef: MutableRefObject<boolean>;\n renderNativeControls: boolean;\n /** @internal */\n initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n locale: defaultLocale,\n direction: directionOfLocale(defaultLocale),\n translations: DefaultTranslation,\n themeMachine: BaseThemeMachine,\n styleSheetTarget: documentIsAvailable ? document.head : undefined,\n portalTarget: documentIsAvailable ? document.body : undefined,\n loadedRef: { current: false },\n renderNativeControls: false,\n initialized: false\n});\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance {\n version: string;\n mountedConfigs: string[];\n mountOrder: string[];\n mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n version: pkg.version,\n mountedConfigs: [],\n mountOrder: [],\n mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n mountedConfigs.add(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n const description = sym.description ?? 'Unknown';\n\n instance.mountOrder.push(description);\n\n if (!(description in instance.mountCount)) {\n instance.mountCount[description] = 0;\n }\n instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n mountedConfigs.delete(sym);\n instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n instances?: CosmosInstance[];\n configurationContext?: Context<ConfigurationContextValue>;\n }\n}\n\nif (windowIsAvailable) {\n if (!window.cosmos.instances) {\n window.cosmos.instances = [];\n }\n\n window.cosmos.instances.push(instance);\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n children,\n locale,\n direction,\n translations: customTranslations,\n theme,\n disableDefaultFontLoading,\n styleSheetTarget,\n portalTarget,\n renderNativeControls,\n id\n}: ConfigurationProps) => {\n const context = windowIsAvailable\n ? window.cosmos.configurationContext ?? ConfigurationContext\n : ConfigurationContext;\n const ctx = useContext(context);\n const themeMachine = theme\n ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n : ctx.themeMachine;\n const translations = useMemo(\n () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n [ctx.translations, customTranslations]\n );\n\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n const sym = Symbol(id);\n mountConfig(sym);\n\n return () => {\n unmountConfig(sym);\n };\n }, [id]);\n\n const wrappedChildren = ctx.initialized ? (\n children\n ) : (\n <StyleSheetManager disableVendorPrefixes target={styleSheetTarget ?? ctx.styleSheetTarget}>\n <>\n {!disableDefaultFontLoading &&\n mounted &&\n documentIsAvailable &&\n createPortal(\n <link\n rel='stylesheet'\n href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap'\n data-cosmos-global-style\n />,\n styleSheetTarget ?? ctx.styleSheetTarget ?? document.head\n )}\n <GlobalStyle />\n {children}\n </>\n </StyleSheetManager>\n );\n\n return (\n <context.Provider\n value={{\n locale: locale ?? ctx.locale,\n direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n translations,\n themeMachine,\n styleSheetTarget: styleSheetTarget ?? ctx.styleSheetTarget,\n portalTarget: portalTarget ?? ctx.portalTarget,\n loadedRef: ctx.loadedRef,\n renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n initialized: true\n }}\n >\n <ThemeProvider theme={themeMachine.theme}>{wrappedChildren}</ThemeProvider>\n </context.Provider>\n );\n};\n\nexport default Configuration;\n"]}
|
|
@@ -17,6 +17,10 @@ export interface FieldGroupProps extends BaseProps {
|
|
|
17
17
|
* @default false
|
|
18
18
|
*/
|
|
19
19
|
defaultCollapsed?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Select the heading tag for header
|
|
22
|
+
*/
|
|
23
|
+
headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
20
24
|
/** The name associated with the Field Group. */
|
|
21
25
|
name?: string;
|
|
22
26
|
/** Provides additional info relevant to the field group. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWjG,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrD,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAgCD,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,sBAAsB;UAAoC,OAAO;SA+B7E,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AA4BF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA4EjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useState } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
+
import Text from '../Text';
|
|
4
5
|
import Button from '../Button';
|
|
5
6
|
import ExpandCollapse from '../ExpandCollapse';
|
|
6
7
|
import Flex from '../Flex';
|
|
@@ -80,14 +81,14 @@ StyledFieldGroup.defaultProps = defaultThemeProp;
|
|
|
80
81
|
const FieldGroupLegend = ({ children, open, actions, additionalInfo, ...restProps }) => {
|
|
81
82
|
return (_jsx(StyledFieldGroupLegend, { open: open, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions })] }) }));
|
|
82
83
|
};
|
|
83
|
-
const FieldGroup = forwardRef(({ children, description, name, additionalInfo, actions, collapsible = false, defaultCollapsed = false, ...restProps }, ref) => {
|
|
84
|
+
const FieldGroup = forwardRef(({ children, description, name, additionalInfo, actions, collapsible = false, defaultCollapsed = false, headingTag, ...restProps }, ref) => {
|
|
84
85
|
const [open, setOpen] = useState(!defaultCollapsed);
|
|
85
86
|
const t = useI18n();
|
|
86
87
|
const uid = useUID();
|
|
87
88
|
const descAndChildren = (_jsxs(Grid, { container: { gap: 3 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
|
|
88
89
|
return (_jsxs(StyledFieldGroup, { "aria-label": name, "aria-describedby": description ? `${uid}-description` : undefined, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { open: open, actions: actions, additionalInfo: additionalInfo, children: collapsible ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
|
|
89
90
|
setOpen(cur => !cur);
|
|
90
|
-
}, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), _jsx(StyledFieldGroupName, { children: name })] }) })) : (_jsx(StyledFieldGroupName, { children: name })) })), collapsible ? (_jsx(ExpandCollapse, { collapsed: !open, children: descAndChildren })) : (descAndChildren)] }));
|
|
91
|
+
}, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] }) })) : (_jsx(_Fragment, { children: headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name })) })) })), collapsible ? (_jsx(ExpandCollapse, { collapsed: !open, children: descAndChildren })) : (descAndChildren)] }));
|
|
91
92
|
});
|
|
92
93
|
export default FieldGroup;
|
|
93
94
|
//# sourceMappingURL=FieldGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. */\n children: ReactNode;\n /** A description of the field group to be displayed above the controls. */\n description?: string;\n /**\n * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n * @default false\n */\n collapsible?: boolean;\n /**\n * If true, the Field Group will be collapsed on the first render.\n * @default false\n */\n defaultCollapsed?: boolean;\n /** The name associated with the Field Group. */\n name?: string;\n /** Provides additional info relevant to the field group. */\n additionalInfo?: {\n heading: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /** An array of actions to add to the header. */\n actions?: ActionsProps['items'];\n /** A reference to the wrapping element. */\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n open: boolean;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n ({\n theme: {\n base: { animation }\n }\n }) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<{ open: boolean }>(\n omitProps('open')\n)(\n ({\n open,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n margin-bottom: 0;\n ${open &&\n css`\n margin-block-end: calc(1.5 * ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n open,\n actions,\n additionalInfo,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend open={open} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {children}\n {additionalInfo && (\n <AdditionalInfo heading={additionalInfo.heading}>\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n description,\n name,\n additionalInfo,\n actions,\n collapsible = false,\n defaultCollapsed = false,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const [open, setOpen] = useState(!defaultCollapsed);\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <Grid container={{ gap: 3 }}>\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n <div>{children}</div>\n </Grid>\n );\n\n return (\n <StyledFieldGroup\n aria-label={name}\n aria-describedby={description ? `${uid}-description` : undefined}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend open={open} actions={actions} additionalInfo={additionalInfo}>\n {collapsible ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n </Flex>\n </StyledExpandButton>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </FieldGroupLegend>\n )}\n {collapsible ? (\n <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}
|
|
1
|
+
{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n /** The content of the Field Group. */\n children: ReactNode;\n /** A description of the field group to be displayed above the controls. */\n description?: string;\n /**\n * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n * @default false\n */\n collapsible?: boolean;\n /**\n * If true, the Field Group will be collapsed on the first render.\n * @default false\n */\n defaultCollapsed?: boolean;\n /**\n * Select the heading tag for header\n */\n headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n /** The name associated with the Field Group. */\n name?: string;\n /** Provides additional info relevant to the field group. */\n additionalInfo?: {\n heading: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n /** An array of actions to add to the header. */\n actions?: ActionsProps['items'];\n /** A reference to the wrapping element. */\n ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n open: boolean;\n actions?: ActionsProps['items'];\n children?: ReactNode;\n additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n ({\n theme: {\n base: { animation }\n }\n }) => {\n const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n &[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n &[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<{ open: boolean }>(\n omitProps('open')\n)(\n ({\n open,\n theme: {\n base: {\n spacing,\n animation,\n 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n }\n }\n }) => {\n return css`\n width: 100%;\n margin-bottom: 0;\n ${open &&\n css`\n margin-block-end: calc(1.5 * ${spacing});\n `}\n transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n > ${StyledExpandButton} {\n min-height: ${hitAreaMouse};\n\n @media (pointer: 'coarse') {\n min-height: ${hitAreaFinger};\n }\n }\n `;\n }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n ({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: { text }\n }\n }) => {\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n border: none;\n\n & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n }\n\n & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n }\n\n & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n }\n\n & & & & ${StyledFieldGroupName} {\n font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n }\n `;\n }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n children,\n open,\n actions,\n additionalInfo,\n ...restProps\n}) => {\n return (\n <StyledFieldGroupLegend open={open} {...restProps}>\n <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {children}\n {additionalInfo && (\n <AdditionalInfo heading={additionalInfo.heading}>\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </Flex>\n {actions && <Actions items={actions} />}\n </Flex>\n </StyledFieldGroupLegend>\n );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n (\n {\n children,\n description,\n name,\n additionalInfo,\n actions,\n collapsible = false,\n defaultCollapsed = false,\n headingTag,\n ...restProps\n }: PropsWithoutRef<FieldGroupProps>,\n ref: FieldGroupProps['ref']\n ) => {\n const [open, setOpen] = useState(!defaultCollapsed);\n const t = useI18n();\n const uid = useUID();\n\n const descAndChildren = (\n <Grid container={{ gap: 3 }}>\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n <div>{children}</div>\n </Grid>\n );\n\n return (\n <StyledFieldGroup\n aria-label={name}\n aria-describedby={description ? `${uid}-description` : undefined}\n {...restProps}\n ref={ref}\n >\n {name && (\n <FieldGroupLegend open={open} actions={actions} additionalInfo={additionalInfo}>\n {collapsible ? (\n <StyledExpandButton\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex\n container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n forwardedAs='span'\n >\n <Icon name='caret-right' />\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </Flex>\n </StyledExpandButton>\n ) : (\n <>\n {headingTag ? (\n <Text variant={headingTag}>{name}</Text>\n ) : (\n <StyledFieldGroupName>{name}</StyledFieldGroupName>\n )}\n </>\n )}\n </FieldGroupLegend>\n )}\n {collapsible ? (\n <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n ) : (\n descAndChildren\n )}\n </StyledFieldGroup>\n );\n }\n);\n\nexport default FieldGroup;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAI7E,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,qJAW1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAI7E,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,qJAW1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAgDzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -32,8 +32,8 @@ const StyledAddButton = styled(Button)(({ theme }) => css `
|
|
|
32
32
|
StyledAddButton.defaultProps = defaultThemeProp;
|
|
33
33
|
const FieldGroupList = forwardRef(({ items, onAdd, onDelete, ...restProps }, ref) => {
|
|
34
34
|
const t = useI18n();
|
|
35
|
-
return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, ...restItemProps }) => {
|
|
36
|
-
return (_jsx(StyledListItem, { name: name, ...restItemProps, actions: onDelete
|
|
35
|
+
return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, headingTag, ...restItemProps }) => {
|
|
36
|
+
return (_jsx(StyledListItem, { name: name, headingTag: headingTag, ...restItemProps, actions: onDelete
|
|
37
37
|
? [
|
|
38
38
|
{
|
|
39
39
|
id: 'delete',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,UAAU,EAAE,EAAmB,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAE7E,YAAY,CAAC,QAAQ,CAAC,CAAC;AAcvB,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;4BACqB,KAAK,CAAC,IAAI,CAAC,OAAO;;QAEtC,gBAAgB;;;KAGnB,CACJ,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;iBACU,KAAK,CAAC,IAAI,CAAC,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO;uCAC7B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;mCACrC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;KAKhD,CACJ,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CACpC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAwC,EAC9E,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC1C,KAAK,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,UAAU,EAAE,EAAmB,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAE7E,YAAY,CAAC,QAAQ,CAAC,CAAC;AAcvB,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;4BACqB,KAAK,CAAC,IAAI,CAAC,OAAO;;QAEtC,gBAAgB;;;KAGnB,CACJ,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;iBACU,KAAK,CAAC,IAAI,CAAC,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO;uCAC7B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;mCACrC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;KAKhD,CACJ,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CACpC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAwC,EAC9E,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC1C,KAAK,CAAC,GAAG,CACR,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,aAAa,EAA2B,EAAE,EAAE;gBAChF,OAAO,CACL,KAAC,cAAc,IAEb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,KAClB,aAAa,EACjB,OAAO,EACL,QAAQ;wBACN,CAAC,CAAC;4BACE;gCACE,EAAE,EAAE,QAAQ;gCACZ,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC;gCACjB,IAAI,EAAE,OAAO;gCACb,QAAQ,EAAE,IAAI;gCACd,OAAO,EAAE,QAAQ;oCACf,CAAC,CAAC,GAAG,EAAE;wCACH,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACf,CAAC;oCACH,CAAC,CAAC,SAAS;6BACd;yBACF;wBACH,CAAC,CAAC,SAAS,YAGd,QAAQ,IAtBJ,EAAE,CAuBQ,CAClB,CAAC;YACJ,CAAC,CACF,EACA,KAAK,IAAI,CACR,MAAC,eAAe,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,aAC5C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,OAAE,CAAC,CAAC,KAAK,CAAC,IACd,CACnB,IACoB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nimport FieldGroup, { FieldGroupProps, StyledFieldGroup } from './FieldGroup';\n\nregisterIcon(plusIcon);\n\nexport interface FieldGroupListItemProps extends FieldGroupProps {\n /** The ID of the field group list item */\n id: string;\n}\n\nexport interface FieldGroupListProps {\n items: FieldGroupListItemProps[];\n onAdd?: () => void;\n onDelete?: (id: string) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n ({ theme }) =>\n css`\n margin-block-start: ${theme.base.spacing};\n\n ${StyledFieldGroup} {\n margin-block-start: 0;\n }\n `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n ({ theme }) =>\n css`\n padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n margin-block-end: calc(2 * ${theme.base.spacing});\n\n legend {\n margin-block-end: 0;\n }\n `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n ({ theme }) =>\n css`\n margin-top: ${theme.base.spacing};\n `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps> = forwardRef(\n (\n { items, onAdd, onDelete, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n ref: FieldGroupListProps['ref']\n ) => {\n const t = useI18n();\n\n return (\n <StyledFieldGroupList ref={ref} {...restProps}>\n {items.map(\n ({ id, children, name, headingTag, ...restItemProps }: FieldGroupListItemProps) => {\n return (\n <StyledListItem\n key={id}\n name={name}\n headingTag={headingTag}\n {...restItemProps}\n actions={\n onDelete\n ? [\n {\n id: 'delete',\n text: t('delete'),\n icon: 'trash',\n iconOnly: true,\n onClick: onDelete\n ? () => {\n onDelete(id);\n }\n : undefined\n }\n ]\n : undefined\n }\n >\n {children}\n </StyledListItem>\n );\n }\n )}\n {onAdd && (\n <StyledAddButton variant='link' onClick={onAdd}>\n <Icon name='plus' /> {t('add')}\n </StyledAddButton>\n )}\n </StyledFieldGroupList>\n );\n }\n);\n\nexport default FieldGroupList;\n"]}
|
|
@@ -42,7 +42,6 @@ export declare const StyledDropZone: import("styled-components").StyledComponent
|
|
|
42
42
|
dragOver: boolean;
|
|
43
43
|
}, never>;
|
|
44
44
|
export declare const StyledFileInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<FileInputProps, never> & Required<Pick<FileInputProps, never>> & ForwardProps, never>;
|
|
45
|
-
declare const
|
|
46
|
-
declare const FileInput: typeof BaseFileInput;
|
|
45
|
+
declare const FileInput: FunctionComponent<FileInputProps & ForwardProps>;
|
|
47
46
|
export default FileInput;
|
|
48
47
|
//# sourceMappingURL=FileInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAEzF,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAS/D,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvE,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;SAYnE,CAAC;AAEH,eAAO,MAAM,eAAe,qNAkB3B,CAAC;AAYF,QAAA,MAAM,
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAEzF,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAS/D,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvE,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;SAYnE,CAAC;AAEH,eAAO,MAAM,eAAe,qNAkB3B,CAAC;AAYF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAkH/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef, useCallback, useState } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { hideVisually } from 'polished';
|
|
5
|
-
import {
|
|
5
|
+
import { useConsolidatedRef, useI18n, useUID, useDirection } from '../../hooks';
|
|
6
6
|
import FormControl from '../FormControl';
|
|
7
7
|
import { defaultThemeProp } from '../../theme';
|
|
8
8
|
import Flex from '../Flex';
|
|
@@ -50,7 +50,7 @@ const StyledInteractiveText = styled.span(({ theme }) => {
|
|
|
50
50
|
`;
|
|
51
51
|
});
|
|
52
52
|
StyledInteractiveText.defaultProps = defaultThemeProp;
|
|
53
|
-
const
|
|
53
|
+
const FileInput = forwardRef((props, ref) => {
|
|
54
54
|
const uid = useUID();
|
|
55
55
|
const { id = uid, label, labelHidden, info, required = false, disabled = false, files, onFilesAdded, multiple = false, status, ...restProps } = props;
|
|
56
56
|
const icon = _jsx(Icon, { name: 'paper-clip' });
|
|
@@ -93,11 +93,5 @@ const BaseFileInput = forwardRef((props, ref) => {
|
|
|
93
93
|
return _jsx(FileUploadItem, { name: name, ...file }, index);
|
|
94
94
|
}) }))] }));
|
|
95
95
|
});
|
|
96
|
-
const FileInput = forwardRef((props, ref) => {
|
|
97
|
-
const Override = useOverride('FileInput');
|
|
98
|
-
if (Override)
|
|
99
|
-
return _jsx(Override, { ...props, ref: ref });
|
|
100
|
-
return _jsx(BaseFileInput, { ...props, ref: ref });
|
|
101
|
-
});
|
|
102
96
|
export default FileInput;
|
|
103
97
|
//# sourceMappingURL=FileInput.js.map
|