npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.2 - Mend

@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2348) hide show

package/input-select/input-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-select.js","sources":["../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\nexport const InputSelect = <T, V>({\n selectedOption,\n placeholder = \"Select\",\n options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n enableSearch = false,\n searchFunction,\n searchPlaceholder,\n valueExtractor,\n valueToStringFunction,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n renderCustomSelectedOption,\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [selected, setSelected] = useState<T \| undefined>(selectedOption);\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOption);\n }, [selectedOption]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setSelected(item);\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n onSelectOption?.(item, extractedValue);\n };\n\n const handleListDismiss = () => {\n if (showOptions) {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n }\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getDisplayValue = (): string => {\n if (!selected) return \"\";\n\n if (displayValueExtractor) {\n return displayValueExtractor(selected);\n }\n\n if (valueExtractor) {\n const value = valueExtractor(selected);\n return valueToStringFunction\n ? valueToStringFunction(value)\n : value?.toString() ?? \"\";\n }\n\n return selected.toString();\n };\n\n const truncateValue = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n }\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (show) {\n onShowOptions?.();\n } else {\n onHideOptions?.();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected) {\n return (\n <PlaceholderLabel\n $truncateType={optionTruncationType}\n $variant={variant}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else if (renderCustomSelectedOption) {\n return renderCustomSelectedOption(selected);\n } else {\n return (\n <ValueLabel\n $truncateType={optionTruncationType}\n $variant={variant}\n >\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n $focused={focused}\n $disabled={disabled}\n $readOnly={readOnly}\n $error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n searchFunction={searchFunction}\n selectedItems={selected ? [selected] : []}\n onRetry={onRetry}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n renderListItem={renderListItem}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n renderCustomCallToAction={renderCustomCallToAction}\n variant={variant}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["InputSelect","selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","$truncateType","$variant","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"input-select.js","sources":["../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\nexport const InputSelect = <T, V>({\n selectedOption,\n placeholder = \"Select\",\n options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n enableSearch = false,\n searchFunction,\n searchPlaceholder,\n valueExtractor,\n valueToStringFunction,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n renderCustomSelectedOption,\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [selected, setSelected] = useState<T \| undefined>(selectedOption);\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOption);\n }, [selectedOption]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setSelected(item);\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n onSelectOption?.(item, extractedValue);\n };\n\n const handleListDismiss = () => {\n if (showOptions) {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n }\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getDisplayValue = (): string => {\n if (!selected) return \"\";\n\n if (displayValueExtractor) {\n return displayValueExtractor(selected);\n }\n\n if (valueExtractor) {\n const value = valueExtractor(selected);\n return valueToStringFunction\n ? valueToStringFunction(value)\n : value?.toString() ?? \"\";\n }\n\n return selected.toString();\n };\n\n const truncateValue = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n }\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (show) {\n onShowOptions?.();\n } else {\n onHideOptions?.();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected) {\n return (\n <PlaceholderLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else if (renderCustomSelectedOption) {\n return renderCustomSelectedOption(selected);\n } else {\n return (\n <ValueLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n searchFunction={searchFunction}\n selectedItems={selected ? [selected] : []}\n onRetry={onRetry}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n renderListItem={renderListItem}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n renderCustomCallToAction={renderCustomCallToAction}\n variant={variant}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["InputSelect","selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/input-select/types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { RefObject } from "react";
-import type { DropdownCustomLabelProps, DropdownDisplayProps, DropdownSearchProps, DropdownVariantType, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list-v2/types";
+import type { DropdownCustomLabelProps, DropdownDisplayProps, DropdownSearchProps, DropdownVariantType, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
 export interface InputSelectOptionsProps<T> {
     options: T[];

package/input-textarea/textarea-counter.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t,Fragment as r}from"react/jsx-runtime";import e,{useState as n,useEffect as o}from"react";import{CounterLabel as a}from"./textara-counter.style.js";const c=({value:c,maxLength:i,renderCustomCounter:l})=>{const[s,m]=n("");o((()=>{m(u(`${c||""}`))}),[c,i]);const u=t=>{if(l)return l(i,t.toString().length);{const r=i-t.toString().length;return 1===r?`${r} character left`:`${r.toLocaleString()} characters left`}};return t(r,{children:e.isValidElement(s)?s:t(a,{"data-testid":"counter-label",children:s})})};export{c as TextareaCounter};
+import{jsx as t,Fragment as e}from"react/jsx-runtime";import r,{useState as n,useEffect as o}from"react";import{counterLabel as a}from"./textarea-counter.styles.js";const c=({value:c,maxLength:l,renderCustomCounter:s})=>{const[i,m]=n("");o((()=>{m(u(`${c||""}`))}),[c,l]);const u=t=>{if(s)return s(l,t.toString().length);{const e=l-t.toString().length;return 1===e?`${e} character left`:`${e.toLocaleString()} characters left`}};return t(e,{children:r.isValidElement(i)?i:t("p",{className:a,"data-testid":"counter-label",children:i})})};export{c as TextareaCounter};
 //# sourceMappingURL=textarea-counter.js.map

package/input-textarea/textarea-counter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea-counter.js","sources":["../../src/input-textarea/textarea-counter.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { ~~CounterLabel~~ } from \"./~~textara~~-counter.~~style~~\";\n\ninterface Props {\n value: string \| number \| readonly string[] \| undefined;\n maxLength: number;\n renderCustomCounter?: (\n maxLength: number,\n currentValueLength: number\n ) => JSX.Element;\n}\n\nexport const TextareaCounter = ({\n value,\n maxLength,\n renderCustomCounter,\n}: Props): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [counterLabel, setCounterLabel] = useState<\n string \| number \| readonly string[] \| JSX.Element\n >(\"\");\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setCounterLabel(getCounterLabel(`${value \|\| \"\"}`));\n }, [value, maxLength]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getCounterLabel = (value: string \| number \| readonly string[]) => {\n if (renderCustomCounter) {\n return renderCustomCounter(maxLength, value.toString().length);\n } else {\n const remainingLength = maxLength - value.toString().length;\n if (remainingLength === 1) {\n return `${remainingLength} character left`;\n } else {\n return `${remainingLength.toLocaleString()} characters left`;\n }\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <>\n {React.isValidElement(counterLabel) ? (\n counterLabel\n ) : (\n <~~CounterLabel~~ data-testid=\"counter-label\">\n {counterLabel}\n </~~CounterLabel~~>\n )}\n </>\n );\n};\n"],"names":["TextareaCounter","value","maxLength","renderCustomCounter","counterLabel","setCounterLabel","useState","useEffect","getCounterLabel","toString","length","remainingLength","toLocaleString","_jsx","_Fragment","children","React","isValidElement","~~CounterLabel~~"],"mappings":"~~mKAaO~~,MAAMA,EAAkB,EAC3BC,QACAC,YACAC,0BAKA,MAAOC,EAAcC,GAAmBC,EAEtC,IAKFC,GAAU,KACNF,EAAgBG,EAAgB,GAAGP,GAAS,MAAM,GACnD,CAACA,EAAOC,IAKX,MAAMM,EAAmBP,IACrB,GAAIE,EACA,OAAOA,EAAoBD,EAAWD,EAAMQ,WAAWC,QACpD,CACH,MAAMC,EAAkBT,EAAYD,EAAMQ,WAAWC,OACrD,OAAwB,IAApBC,EACO,GAAGA,mBAEH,GAAGA,EAAgBC,kCAElC,GAMJ,OACIC,EAAAC,EAAA,CAAAC,SACKC,EAAMC,eAAeb,GAAa,EAG/BS,~~EAACK~~,~~EAAY~~,~~CAAA~~,~~cAAa~~,~~gBAAeH~~,~~SACpCX~~,KAGV"}
1	+ {"version":3,"file":"textarea-counter.js","sources":["../../src/input-textarea/textarea-counter.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport * as styles from \"./textarea-counter.styles\";\n\ninterface Props {\n value: string \| number \| readonly string[] \| undefined;\n maxLength: number;\n renderCustomCounter?: (\n maxLength: number,\n currentValueLength: number\n ) => JSX.Element;\n}\n\nexport const TextareaCounter = ({\n value,\n maxLength,\n renderCustomCounter,\n}: Props): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [counterLabel, setCounterLabel] = useState<\n string \| number \| readonly string[] \| JSX.Element\n >(\"\");\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setCounterLabel(getCounterLabel(`${value \|\| \"\"}`));\n }, [value, maxLength]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getCounterLabel = (value: string \| number \| readonly string[]) => {\n if (renderCustomCounter) {\n return renderCustomCounter(maxLength, value.toString().length);\n } else {\n const remainingLength = maxLength - value.toString().length;\n if (remainingLength === 1) {\n return `${remainingLength} character left`;\n } else {\n return `${remainingLength.toLocaleString()} characters left`;\n }\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <>\n {React.isValidElement(counterLabel) ? (\n counterLabel\n ) : (\n <p className={styles.counterLabel} data-testid=\"counter-label\">\n {counterLabel}\n </p>\n )}\n </>\n );\n};\n"],"names":["TextareaCounter","value","maxLength","renderCustomCounter","counterLabel","setCounterLabel","useState","useEffect","getCounterLabel","toString","length","remainingLength","toLocaleString","_jsx","_Fragment","children","React","isValidElement","className","styles.counterLabel"],"mappings":"qKAaO,MAAMA,EAAkB,EAC3BC,QACAC,YACAC,0BAKA,MAAOC,EAAcC,GAAmBC,EAEtC,IAKFC,GAAU,KACNF,EAAgBG,EAAgB,GAAGP,GAAS,MAAM,GACnD,CAACA,EAAOC,IAKX,MAAMM,EAAmBP,IACrB,GAAIE,EACA,OAAOA,EAAoBD,EAAWD,EAAMQ,WAAWC,QACpD,CACH,MAAMC,EAAkBT,EAAYD,EAAMQ,WAAWC,OACrD,OAAwB,IAApBC,EACO,GAAGA,mBAEH,GAAGA,EAAgBC,kCAElC,GAMJ,OACIC,EAAAC,EAAA,CAAAC,SACKC,EAAMC,eAAeb,GAAa,EAG/BS,EAAA,IAAA,CAAGK,UAAWC,EAAmB,cAAc,gBAAeJ,SACzDX,KAGV"}

package/input-textarea/textarea-counter.styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const counterLabel: import("@linaria/core").LinariaClassName;

package/input-textarea/textarea-counter.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./textarea-counter.styles_adg5h1.css";const t="c1d4l1yp";export{t as counterLabel};
2	+ //# sourceMappingURL=textarea-counter.styles.js.map

package/input-textarea/textarea-counter.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"textarea-counter.styles.js","sources":["../../src/input-textarea/textarea-counter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\nexport const counterLabel = css`\n text-align: right;\n ${Font[\"body-sm-semibold\"]}\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["counterLabel"],"mappings":"2EAIO,MAAMA,EAAY"}

package/input-textarea/textarea-counter.styles_adg5h1.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .c1d4l1yp{text-align:right;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-subtler);}

package/input-textarea/textarea.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import a,{useState as n,useEffect as o}from"react";import{Element as s,Wrapper as l}from"./textarea.style.js";import{TextareaCounter as i}from"./textarea-counter.js";const u=a.forwardRef(((r,a)=>{var{value:l,disabled:i,error:u,rows:g=5,prefix:f,transformValue:m,onChange:c,maxLength:h}=r,v=e(r,["value","disabled","error","rows","prefix","transformValue","onChange","maxLength"]);const[d,p]=n(l);o((()=>{p(l)}),[l]);return t(s,Object.assign({ref:a,disabled:i,value:f?f+(null!=d?d:""):d,onChange:e=>{let t=e.target.value;if(f){t.startsWith(f)||(t=f+t.trimStart()),t.length<f.length&&(t=f);if((e.target.selectionStart||0)<f.length)return void e.preventDefault();const r=t.slice(f.length),a=m?m(r):r;if(p(a),e.target.value=f+a,c){const t=Object.assign(Object.assign({},e),{target:Object.assign(Object.assign({},e.target),{value:a})});c(t)}}else{const r=m?m(null!=t?t:""):t;p(r),e.target.value=r,c&&c(e)}},onKeyDown:e=>{if(!f)return;const{selectionStart:t}=e.currentTarget;"Backspace"===e.key&&t<=f.length&&e.preventDefault(),"ArrowLeft"===e.key&&t<=f.length&&e.preventDefault(),"Home"===e.key&&(e.preventDefault(),requestAnimationFrame((()=>{e.currentTarget.setSelectionRange(f.length,f.length)})))},$error:u,rows:g,maxLength:f&&h?f.length+h:h},v))})),g=a.forwardRef(((a,s)=>{var{value:g,disabled:f,rows:m=5,onChange:c,transformValue:h,prefix:v,maxLength:d,renderCustomCounter:p}=a,x=e(a,["value","disabled","rows","onChange","transformValue","prefix","maxLength","renderCustomCounter"]);const[b,C]=n(g);o((()=>{C(g)}),[g]);return r(l,{children:[t(u,Object.assign({ref:s,disabled:f,value:b,rows:m||5,onChange:e=>{const t=e.target.value;C(t),c&&c(e)},prefix:v,transformValue:h,maxLength:d},x)),d&&t(i,{value:b,maxLength:d,renderCustomCounter:p})]})}));export{g as Textarea,u as TextareaBase};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import a from"clsx";import n,{useState as s,useEffect as l}from"react";import{element as o,elementReadOnly as i,elementDisabled as u,elementError as g,wrapper as m}from"./textarea.styles.js";import{TextareaCounter as c}from"./textarea-counter.js";const f=n.forwardRef(((r,n)=>{var{className:m,disabled:c,error:f,maxLength:h,onChange:d,prefix:v,readOnly:x,rows:p=5,transformValue:b,value:C}=r,j=e(r,["className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value"]);const[w,O]=s(C);l((()=>{O(C)}),[C]);return t("textarea",Object.assign({ref:n,disabled:c,value:v?v+(null!=w?w:""):w,onChange:e=>{let t=e.target.value;if(v){t.startsWith(v)||(t=v+t.trimStart()),t.length<v.length&&(t=v);if((e.target.selectionStart||0)<v.length)return void e.preventDefault();const r=t.slice(v.length),a=b?b(r):r;if(O(a),e.target.value=v+a,d){const t=Object.assign(Object.assign({},e),{target:Object.assign(Object.assign({},e.target),{value:a})});d(t)}}else{const r=b?b(null!=t?t:""):t;O(r),e.target.value=r,d&&d(e)}},onKeyDown:e=>{if(!v)return;const{selectionStart:t}=e.currentTarget;"Backspace"===e.key&&t<=v.length&&e.preventDefault(),"ArrowLeft"===e.key&&t<=v.length&&e.preventDefault(),"Home"===e.key&&(e.preventDefault(),requestAnimationFrame((()=>{e.currentTarget.setSelectionRange(v.length,v.length)})))},readOnly:x,className:a(o,x&&i||c&&u||f&&g,m),rows:p,maxLength:v&&h?v.length+h:h},j))})),h=n.forwardRef(((a,n)=>{var{value:o,disabled:i,rows:u=5,onChange:g,transformValue:h,prefix:d,maxLength:v,renderCustomCounter:x}=a,p=e(a,["value","disabled","rows","onChange","transformValue","prefix","maxLength","renderCustomCounter"]);const[b,C]=s(o);l((()=>{C(o)}),[o]);return r("div",{className:m,children:[t(f,Object.assign({ref:n,disabled:i,value:b,rows:u||5,onChange:e=>{const t=e.target.value;C(t),g&&g(e)},prefix:d,transformValue:h,maxLength:v},p)),v&&t(c,{value:b,maxLength:v,renderCustomCounter:x})]})}));export{h as Textarea,f as TextareaBase};
 //# sourceMappingURL=textarea.js.map

package/input-textarea/textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.js","sources":["../../src/input-textarea/textarea.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { ~~Element,~~ ~~Wrapper~~ } from \"./textarea.~~style~~\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport type { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n {\n ~~value~~,\n disabled,\n error,\n ~~rows = 5~~,\n prefix,\n ~~transformValue~~,\n ~~onChange~~,\n ~~maxLength~~,\n ...otherProps\n }: TextareaProps,\n ref: TextareaRef\n) => {\n const [stateValue, setStateValue] = useState(value);\n\n useEffect(() => {\n setStateValue(value);\n }, [value]);\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n let newValue = event.target.value;\n if (prefix) {\n // Ensure prefix is always present\n if (!newValue.startsWith(prefix)) {\n newValue = prefix + newValue.trimStart();\n }\n\n // Prevent deleting the prefix\n if (newValue.length < prefix.length) {\n newValue = prefix;\n }\n\n const cursorPosition = event.target.selectionStart \|\| 0;\n\n // Ensure backspace does not delete the prefix\n if (cursorPosition < prefix.length) {\n event.preventDefault();\n return;\n }\n\n // Extract user input\n const userInput = newValue.slice(prefix.length);\n\n // Transform the input if needed\n const transformedValue = transformValue\n ? transformValue(userInput)\n : userInput;\n\n // Update state and input field\n setStateValue(transformedValue);\n event.target.value = prefix + transformedValue;\n\n // Pass only the user input (without prefix) to `onChange`\n if (onChange) {\n const syntheticEvent = {\n ...event,\n target: { ...event.target, value: transformedValue },\n };\n onChange(\n syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n );\n }\n } else {\n const transformedValue = transformValue\n ? transformValue(newValue ?? \"\")\n : newValue;\n\n setStateValue(transformedValue);\n event.target.value = transformedValue;\n if (onChange) onChange(event);\n }\n };\n\n const getDisplayValue = () => {\n return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (!prefix) return;\n\n const { selectionStart } = event.currentTarget;\n\n // Prevent backspace in prefix\n if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n event.preventDefault();\n }\n\n // Prevent left arrow from moving into prefix\n if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n event.preventDefault();\n }\n\n // Prevent \"Home\" key from moving cursor to beginning\n if (event.key === \"Home\") {\n event.preventDefault();\n requestAnimationFrame(() => {\n event.currentTarget.setSelectionRange(\n prefix.length,\n prefix.length\n );\n });\n }\n };\n\n return (\n <~~Element~~\n ref={ref}\n disabled={disabled}\n value={getDisplayValue()}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ~~$error~~={error}\n rows={rows}\n maxLength={\n prefix && maxLength ? prefix.length + maxLength : maxLength\n }\n {...otherProps}\n />\n );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n {\n value,\n disabled,\n rows = 5,\n onChange,\n transformValue,\n prefix,\n maxLength,\n renderCustomCounter,\n ...otherProps\n }: TextareaProps,\n ref: TextareaRef\n) => {\n // -------------------------------------------------------------------------\n // CONST, STATE, REF\n // -------------------------------------------------------------------------\n const [stateValue, setStateValue] = useState<\n string \| number \| readonly string[] \| undefined\n >(value);\n\n // -------------------------------------------------------------------------\n // EFFECTS\n // -------------------------------------------------------------------------\n useEffect(() => {\n setStateValue(value);\n }, [value]);\n\n // -------------------------------------------------------------------------\n // EVENT HANDLER\n // -------------------------------------------------------------------------\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = event.target.value;\n setStateValue(newValue);\n if (onChange) onChange(event);\n };\n\n // -------------------------------------------------------------------------\n // RENDER FUNCTIONS\n // -------------------------------------------------------------------------\n return (\n <~~Wrapper~~>\n <TextareaBase\n ref={ref}\n disabled={disabled}\n value={stateValue}\n rows={rows \|\| 5}\n onChange={handleChange}\n prefix={prefix}\n transformValue={transformValue}\n maxLength={maxLength}\n {...otherProps}\n />\n {maxLength && (\n <TextareaCounter\n value={stateValue}\n maxLength={maxLength}\n renderCustomCounter={renderCustomCounter}\n />\n )}\n </~~Wrapper~~>\n );\n};\n\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","~~value~~","disabled","error","~~rows~~","prefix","~~transformValue~~","~~onChange~~","~~maxLength~~","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","~~Element","~~Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","~~$error~~","Textarea","renderCustomCounter","_jsxs","~~Wrapper~~","children","TextareaCounter"],"mappings":"~~uQASA~~,~~MA0HaA~~,EAAeC,EAAMC,~~YA1HJ~~,CAC1BC,~~EAWAC~~,~~SAXAC~~,~~MACIA~~,~~EAAKC~~,~~SACLA~~,EAAQC,MACRA,EAAKC,~~KACLA~~,~~EAAO~~,~~EAACC~~,OACRA,EAAMC,~~eACNA~~,EAAcC,~~SACdA~~,~~EAAQC~~,~~UACRA~~,~~KACGC,~~EAAUC,~~EAAAX~~,~~EATjB~~,CAAA,~~QAAA~~,WAAA,QAAA,~~OAAA~~,SAAA,iBAAA,~~WAAA~~,~~cAaA~~,~~MAAOY,~~EAAYC,GAAiBC,~~EAASZ~~,~~GAE7Ca~~,GAAU,KACNF,~~EAAcX~~,EAAM,GACrB,CAACA,IAuFJ,~~OACIc~~,~~EAACC~~,~~EAAOC~~,OAAAC,OAAA,~~CACJlB~~,IAAKA,EACLE,SAAUA,~~EACVD~~,~~MAlCGI~~,EAASA,~~GAAUM~~,QAAAA,EAAc,IAAMA,~~EAmC1CJ~~,~~SA1FcY~~,IAClB,IAAIC,EAAWD,EAAME,~~OAAOpB~~,MAC5B,~~GAAII~~,EAAQ,CAEHe,EAASE,WAAWjB,KACrBe,EAAWf,EAASe,EAASG,aAI7BH,EAASI,OAASnB,EAAOmB,SACzBJ,EAAWf,GAMf,IAHuBc,EAAME,OAAOI,gBAAkB,GAGjCpB,EAAOmB,OAExB,YADAL,EAAMO,iBAKV,MAAMC,EAAYP,EAASQ,MAAMvB,EAAOmB,QAGlCK,~~EAAmBvB~~,EACnBA,~~EAAeqB~~,GACfA,EAON,~~GAJAf~~,~~EAAciB~~,GACdV,EAAME,~~OAAOpB~~,~~MAAQI~~,EAASwB,~~EAG1BtB~~,EAAU,CACV,~~MAAMuB~~,EAAcb,OAAAC,OAAAD,OAAAC,OAAA,GACbC,GAAK,CACRE,OAAMJ,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAOC,EAAME,QAAM,~~CAAEpB~~,~~MAAO4B~~,~~MAEtCtB~~,~~EACIuB~~,EAER,CACJ,KAAO,CACH,MAAMD,~~EAAmBvB~~,EACnBA,~~EAAec~~,QAAAA,EAAY,IAC3BA,~~EAENR~~,~~EAAciB~~,GACdV,EAAME,~~OAAOpB~~,~~MAAQ4B~~,~~EACjBtB~~,GAAUA,~~EAASY~~,EAC3B,GAwCIY,UAjCeZ,IACnB,IAAKd,EAAQ,OAEb,MAAMoB,eAAEA,GAAmBN,EAAMa,cAGf,cAAdb,EAAMc,KAAuBR,GAAkBpB,EAAOmB,QACtDL,EAAMO,iBAIQ,cAAdP,EAAMc,KAAuBR,GAAkBpB,EAAOmB,QACtDL,EAAMO,iBAIQ,SAAdP,EAAMc,MACNd,EAAMO,iBACNQ,uBAAsB,KAClBf,EAAMa,cAAcG,kBAChB9B,EAAOmB,OACPnB,EAAOmB,OACV,IAET,~~EAS4BY~~,~~OAChBjC~~,~~EACRC~~,KAAMA,~~EACNI~~,~~UACIH~~,~~GAAUG~~,~~EAAYH~~,EAAOmB,~~OAAShB~~,EAAYA,~~GAElDC~~,GACN,~~IA0EG4B~~,~~EAAWxC~~,EAAMC,YAhEJ,CACtBC,EAWAC,~~SAXAC~~,MACIA,~~EAAKC~~,SACLA,~~EAAQE~~,KACRA,EAAO,~~EAACG~~,SACRA,~~EAAQD~~,eACRA,~~EAAcD~~,OACdA,~~EAAMG~~,UACNA,~~EAAS8B~~,oBACTA,~~KACG7B~~,EAAUC,~~EAAAX~~,EATjB,CAAA,QAAA,WAAA,OAAA,WAAA,iBAAA,SAAA,YAAA,wBAgBA,~~MAAOY~~,EAAYC,GAAiBC,~~EAElCZ~~,~~GAKFa~~,GAAU,KACNF,~~EAAcX~~,EAAM,GACrB,CAACA,IAcJ,~~OACIsC~~,~~EAACC~~,~~EAAO~~,~~CAAAC~~,SAAA,~~CACJ1B~~,~~EAACnB~~,~~EAAYqB~~,OAAAC,OAAA,~~CACTlB~~,IAAKA,EACLE,SAAUA,~~EACVD~~,~~MAAOU~~,~~EACPP~~,KAAMA,GAAQ,~~EACdG~~,~~SAhBUY~~,IAClB,MAAMC,EAAWD,EAAME,~~OAAOpB~~,~~MAC9BW~~,~~EAAcQ~~,~~GACVb~~,GAAUA,~~EAASY~~,EAAM,EAcrBd,OAAQA,~~EACRC~~,eAAgBA,~~EAChBE~~,UAAWA,~~GACPC~~,~~IAEPD~~,~~GACGO~~,~~EAAC2B~~,EAAe,~~CACZzC~~,~~MAAOU~~,~~EACPH~~,UAAWA,~~EACX8B~~,oBAAqBA,~~MAGvB~~"}
1	+ {"version":3,"file":"textarea.js","sources":["../../src/input-textarea/textarea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport * as styles from \"./textarea.styles\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport type { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n {\n className,\n disabled,\n error,\n maxLength,\n onChange,\n prefix,\n readOnly,\n rows = 5,\n transformValue,\n value,\n ...otherProps\n }: TextareaProps,\n ref: TextareaRef\n) => {\n const [stateValue, setStateValue] = useState(value);\n\n useEffect(() => {\n setStateValue(value);\n }, [value]);\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n let newValue = event.target.value;\n if (prefix) {\n // Ensure prefix is always present\n if (!newValue.startsWith(prefix)) {\n newValue = prefix + newValue.trimStart();\n }\n\n // Prevent deleting the prefix\n if (newValue.length < prefix.length) {\n newValue = prefix;\n }\n\n const cursorPosition = event.target.selectionStart \|\| 0;\n\n // Ensure backspace does not delete the prefix\n if (cursorPosition < prefix.length) {\n event.preventDefault();\n return;\n }\n\n // Extract user input\n const userInput = newValue.slice(prefix.length);\n\n // Transform the input if needed\n const transformedValue = transformValue\n ? transformValue(userInput)\n : userInput;\n\n // Update state and input field\n setStateValue(transformedValue);\n event.target.value = prefix + transformedValue;\n\n // Pass only the user input (without prefix) to `onChange`\n if (onChange) {\n const syntheticEvent = {\n ...event,\n target: { ...event.target, value: transformedValue },\n };\n onChange(\n syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n );\n }\n } else {\n const transformedValue = transformValue\n ? transformValue(newValue ?? \"\")\n : newValue;\n\n setStateValue(transformedValue);\n event.target.value = transformedValue;\n if (onChange) onChange(event);\n }\n };\n\n const getDisplayValue = () => {\n return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (!prefix) return;\n\n const { selectionStart } = event.currentTarget;\n\n // Prevent backspace in prefix\n if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n event.preventDefault();\n }\n\n // Prevent left arrow from moving into prefix\n if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n event.preventDefault();\n }\n\n // Prevent \"Home\" key from moving cursor to beginning\n if (event.key === \"Home\") {\n event.preventDefault();\n requestAnimationFrame(() => {\n event.currentTarget.setSelectionRange(\n prefix.length,\n prefix.length\n );\n });\n }\n };\n\n return (\n <textarea\n ref={ref}\n disabled={disabled}\n value={getDisplayValue()}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n readOnly={readOnly}\n className={clsx(\n styles.element,\n (readOnly && styles.elementReadOnly) \|\|\n (disabled && styles.elementDisabled) \|\|\n (error && styles.elementError),\n className\n )}\n rows={rows}\n maxLength={\n prefix && maxLength ? prefix.length + maxLength : maxLength\n }\n {...otherProps}\n />\n );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n {\n value,\n disabled,\n rows = 5,\n onChange,\n transformValue,\n prefix,\n maxLength,\n renderCustomCounter,\n ...otherProps\n }: TextareaProps,\n ref: TextareaRef\n) => {\n // -------------------------------------------------------------------------\n // CONST, STATE, REF\n // -------------------------------------------------------------------------\n const [stateValue, setStateValue] = useState<\n string \| number \| readonly string[] \| undefined\n >(value);\n\n // -------------------------------------------------------------------------\n // EFFECTS\n // -------------------------------------------------------------------------\n useEffect(() => {\n setStateValue(value);\n }, [value]);\n\n // -------------------------------------------------------------------------\n // EVENT HANDLER\n // -------------------------------------------------------------------------\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = event.target.value;\n setStateValue(newValue);\n if (onChange) onChange(event);\n };\n\n // -------------------------------------------------------------------------\n // RENDER FUNCTIONS\n // -------------------------------------------------------------------------\n return (\n <div className={styles.wrapper}>\n <TextareaBase\n ref={ref}\n disabled={disabled}\n value={stateValue}\n rows={rows \|\| 5}\n onChange={handleChange}\n prefix={prefix}\n transformValue={transformValue}\n maxLength={maxLength}\n {...otherProps}\n />\n {maxLength && (\n <TextareaCounter\n value={stateValue}\n maxLength={maxLength}\n renderCustomCounter={renderCustomCounter}\n />\n )}\n </div>\n );\n};\n\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","clsx","styles.element","styles.elementReadOnly","styles.elementDisabled","styles.elementError","Textarea","renderCustomCounter","_jsxs","styles.wrapper","children","TextareaCounter"],"mappings":"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"}

package/input-textarea/textarea.styles.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const element: import("@linaria/core").LinariaClassName;
+export declare const elementReadOnly: import("@linaria/core").LinariaClassName;
+export declare const elementDisabled: import("@linaria/core").LinariaClassName;
+export declare const elementError: import("@linaria/core").LinariaClassName;

package/input-textarea/textarea.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./textarea.styles_g0zgyq.css";const t="w1xqauhq",e="e10c6rk9",a="e1kovz0t",r="e9uwuyt",s="etmlvbn";export{e as element,r as elementDisabled,s as elementError,a as elementReadOnly,t as wrapper};
2	+ //# sourceMappingURL=textarea.styles.js.map

package/input-textarea/textarea.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"textarea.styles.js","sources":["../../src/input-textarea/textarea.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n display: flex;\n flex-direction: column;\n`;\n\nexport const element = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour.bg};\n outline: none;\n overflow: auto;\n\n display: block;\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n width: 100%;\n\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n\n &:focus,\n &:active {\n outline-offset: -1px;\n outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n ${Colour[\"border-focus\"]};\n }\n\n &::placeholder,\n &::-webkit-input-placeholder {\n color: ${Colour[\"text-subtler\"]};\n }\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${Colour[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${Radius[\"full\"]};\n background-clip: padding-box;\n }\n`;\n\nexport const elementReadOnly = css`\n border-color: transparent;\n background: transparent !important;\n padding: ${Spacing[\"spacing-12\"]} 0;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-focus\"]};\n }\n`;\n\nexport const elementDisabled = css`\n background: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-disabled\"]};\n }\n`;\n\nexport const elementError = css`\n border-color: ${Colour[\"border-error\"]};\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-error-focus\"]};\n }\n`;\n"],"names":["wrapper","element","elementReadOnly","elementDisabled","elementError"],"mappings":"mEAIO,MAAMA,EAAO,WAKPC,EAAO,WA0CPC,EAAe,WAWfC,EAAe,UAUfC,EAAY"}

package/input-textarea/textarea.styles_g0zgyq.css ADDED Viewed

@@ -0,0 +1,5 @@
+.w1xqauhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.e10c6rk9{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);outline:none;overflow:auto;display:block;padding:var(--fds-spacing-12) var(--fds-spacing-16);width:100%;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.e10c6rk9:focus,.e10c6rk9:active{outline-offset:-1px;outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-border-focus);}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-webkit-scrollbar{width:14px;}.e10c6rk9::-webkit-scrollbar-track{background:transparent;}.e10c6rk9::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-moz-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::placeholder{color:var(--fds-colour-text-subtler);}
+.e1kovz0t{border-color:transparent;background:transparent!important;padding:var(--fds-spacing-12) 0;}.e1kovz0t:focus,.e1kovz0t:active{outline-color:var(--fds-colour-border-focus);}
+.e9uwuyt{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.e9uwuyt:focus,.e9uwuyt:active{outline-color:var(--fds-colour-border-disabled);}
+.etmlvbn{border-color:var(--fds-colour-border-error);}.etmlvbn:focus,.etmlvbn:active{outline-color:var(--fds-colour-border-error-focus);}

package/language-switcher/data.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { LanguageSwitcherCode } from "./types";
+export declare const LANGUAGE_DISPLAY_MAP: Record<LanguageSwitcherCode, string>;
+export declare const LANGUAGE_CODES: LanguageSwitcherCode[];
+export declare const ARIA_LABEL = "Choose language / \u9009\u62E9\u8BED\u8A00 / Pilih bahasa / \u0BAE\u0BCA\u0BB4\u0BBF\u0BAF\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD";

package/language-switcher/data.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const a={en:"English",zh:"中文",ms:"Melayu",ta:"தமிழ்"},e=["en","zh","ms","ta"],h="Choose language / 选择语言 / Pilih bahasa / மொழியை தேர்ந்தெடுக்கவும்";export{h as ARIA_LABEL,e as LANGUAGE_CODES,a as LANGUAGE_DISPLAY_MAP};
2	+ //# sourceMappingURL=data.js.map

package/language-switcher/data.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"data.js","sources":["../../src/language-switcher/data.ts"],"sourcesContent":["import type { LanguageSwitcherCode } from \"./types\";\n\nexport const LANGUAGE_DISPLAY_MAP: Record<LanguageSwitcherCode, string> = {\n en: \"English\",\n zh: \"中文\",\n ms: \"Melayu\",\n ta: \"தமிழ்\",\n};\n\nexport const LANGUAGE_CODES: LanguageSwitcherCode[] = [\"en\", \"zh\", \"ms\", \"ta\"];\n\nexport const ARIA_LABEL =\n \"Choose language / 选择语言 / Pilih bahasa / மொழியை தேர்ந்தெடுக்கவும்\";\n"],"names":["LANGUAGE_DISPLAY_MAP","en","zh","ms","ta","LANGUAGE_CODES","ARIA_LABEL"],"mappings":"AAEO,MAAMA,EAA6D,CACtEC,GAAI,UACJC,GAAI,KACJC,GAAI,SACJC,GAAI,SAGKC,EAAyC,CAAC,KAAM,KAAM,KAAM,MAE5DC,EACT"}

package/language-switcher/dropdown-variant.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { VariantInternalProps } from "./internal-types";
2	+ export declare const DropdownVariant: ({ selectedLanguage, onSelectLanguage, testId, ...otherProps }: VariantInternalProps) => JSX.Element;

package/language-switcher/dropdown-variant.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import{LanguageIcon as n}from"@lifesg/react-icons/language";import{TickIcon as a}from"@lifesg/react-icons/tick";import o from"clsx";import{useState as s,useRef as i,useEffect as l}from"react";import{baseIndicatorStyle as d,selectedIndicator as c,listItem as p,listItemActiveSelected as u,listItemActive as m}from"../shared/dropdown-list/dropdown-list.styles.js";import{ElementWithDropdown as f}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as g}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{LANGUAGE_CODES as v,ARIA_LABEL as h,LANGUAGE_DISPLAY_MAP as b}from"./data.js";import{DropdownPanel as j,DropdownList as w,DropdownItem as x,StyledExpandableElement as y,LanguageIconWrapper as D}from"./dropdown-variant.style.js";const k=k=>{var{selectedLanguage:O,onSelectLanguage:$,testId:I}=k,L=e(k,["selectedLanguage","onSelectLanguage","testId"]);const[E,N]=s(!1),[T,A]=s(-1),C=i(null),F=i([]),M=`listbox-${g()}`;l((()=>{if(E){const e=v.indexOf(O),t=e>=0?e:0;A(t),setTimeout((()=>{var e;null===(e=F.current[t])\|\|void 0===e\|\|e.focus()}),0)}else A(-1)}),[E,O]);const R=e=>{var t;$(e),N(!1),null===(t=C.current)\|\|void 0===t\|\|t.focus()},S=e=>{var t,r,n,a;switch(e.key){case"ArrowDown":{e.preventDefault();const r=Math.min(T+1,v.length-1);A(r),null===(t=F.current[r])\|\|void 0===t\|\|t.focus();break}case"ArrowUp":{e.preventDefault();const t=Math.max(T-1,0);A(t),null===(r=F.current[t])\|\|void 0===r\|\|r.focus();break}case"Home":e.preventDefault(),A(0),null===(n=F.current[0])\|\|void 0===n\|\|n.focus();break;case"End":{e.preventDefault();const t=v.length-1;A(t),null===(a=F.current[t])\|\|void 0===a\|\|a.focus();break}case"Enter":case" ":e.preventDefault(),T>=0&&R(v[T])}};return t("div",Object.assign({"data-testid":I},L,{children:t(f,{enabled:!0,isOpen:E,renderElement:()=>r(y,{ref:C,disabled:!1,expanded:E,listboxId:M,popupRole:"listbox",readOnly:!1,"aria-label":`${h}, ${b[O]}`,"data-testid":`${I}--trigger`,children:[t(D,{"aria-hidden":!0,children:t(n,{})}),b[O]]}),renderDropdown:({elementWidth:e,styles:n,setFloatingRef:s,getFloatingProps:i})=>t(j,Object.assign({ref:s,style:Object.assign(Object.assign({},n),{width:e}),"data-testid":`${I}--panel`},i(),{children:t(w,{role:"listbox",id:M,"aria-label":h,onKeyDown:S,children:v.map(((e,n)=>{const s=e===O,i=n===T;return r(x,{ref:e=>{F.current[n]=e},role:"option",lang:e,className:o(p,i&&s&&u,i&&!s&&m),"aria-selected":s,tabIndex:i?0:-1,$selected:s,onClick:()=>R(e),"data-testid":`${I}--item-${e}`,children:[s?t(a,{className:o(d,c),"aria-hidden":!0}):t("div",{className:d}),b[e]]},e)}))})})),onOpen:()=>{N(!0)},onClose:()=>{N(!1)},onDismiss:()=>{var e;N(!1),null===(e=C.current)\|\|void 0===e\|\|e.focus()},clickToToggle:!0,offset:8})}))};export{k as DropdownVariant};
2	+ //# sourceMappingURL=dropdown-variant.js.map

package/language-switcher/dropdown-variant.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown-variant.js","sources":["../../src/language-switcher/dropdown-variant.tsx"],"sourcesContent":["import { LanguageIcon } from \"@lifesg/react-icons/language\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n baseIndicatorStyle,\n listItem,\n listItemActive,\n listItemActiveSelected,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { useId } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport {\n DropdownItem,\n DropdownList,\n DropdownPanel,\n LanguageIconWrapper,\n selectedIndicator,\n StyledExpandableElement,\n} from \"./dropdown-variant.style\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport type { LanguageSwitcherCode } from \"./types\";\n\nexport const DropdownVariant = ({\n selectedLanguage,\n onSelectLanguage,\n testId,\n ...otherProps\n}: VariantInternalProps): JSX.Element => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState(-1);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const itemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n const id = useId();\n const listboxId = `listbox-${id}`;\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n if (isOpen) {\n const selectedIdx = LANGUAGE_CODES.indexOf(selectedLanguage);\n const idx = selectedIdx >= 0 ? selectedIdx : 0;\n setFocusedIndex(idx);\n setTimeout(() => {\n itemRefs.current[idx]?.focus();\n }, 0);\n } else {\n setFocusedIndex(-1);\n }\n }, [isOpen, selectedLanguage]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleOpen = () => {\n setIsOpen(true);\n };\n\n const handleClose = () => {\n setIsOpen(false);\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n triggerRef.current?.focus();\n };\n\n const handleItemSelect = (code: LanguageSwitcherCode) => {\n onSelectLanguage(code);\n setIsOpen(false);\n triggerRef.current?.focus();\n };\n\n const handleListKeyDown = (event: React.KeyboardEvent) => {\n switch (event.key) {\n case \"ArrowDown\": {\n event.preventDefault();\n const next = Math.min(\n focusedIndex + 1,\n LANGUAGE_CODES.length - 1\n );\n setFocusedIndex(next);\n itemRefs.current[next]?.focus();\n break;\n }\n case \"ArrowUp\": {\n event.preventDefault();\n const prev = Math.max(focusedIndex - 1, 0);\n setFocusedIndex(prev);\n itemRefs.current[prev]?.focus();\n break;\n }\n case \"Home\": {\n event.preventDefault();\n setFocusedIndex(0);\n itemRefs.current[0]?.focus();\n break;\n }\n case \"End\": {\n event.preventDefault();\n const last = LANGUAGE_CODES.length - 1;\n setFocusedIndex(last);\n itemRefs.current[last]?.focus();\n break;\n }\n case \"Enter\":\n case \" \": {\n event.preventDefault();\n if (focusedIndex >= 0) {\n handleItemSelect(LANGUAGE_CODES[focusedIndex]);\n }\n break;\n }\n }\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderElement = () => (\n <StyledExpandableElement\n ref={triggerRef}\n disabled={false}\n expanded={isOpen}\n listboxId={listboxId}\n popupRole=\"listbox\"\n readOnly={false}\n aria-label={`${ARIA_LABEL}, ${LANGUAGE_DISPLAY_MAP[selectedLanguage]}`}\n data-testid={`${testId}--trigger`}\n >\n <LanguageIconWrapper aria-hidden>\n <LanguageIcon />\n </LanguageIconWrapper>\n {LANGUAGE_DISPLAY_MAP[selectedLanguage]}\n </StyledExpandableElement>\n );\n\n const renderDropdown = ({\n elementWidth,\n styles,\n setFloatingRef,\n getFloatingProps,\n }: DropdownRenderProps) => (\n <DropdownPanel\n ref={setFloatingRef}\n style={{ ...styles, width: elementWidth }}\n data-testid={`${testId}--panel`}\n {...getFloatingProps()}\n >\n <DropdownList\n role=\"listbox\"\n id={listboxId}\n aria-label={ARIA_LABEL}\n onKeyDown={handleListKeyDown}\n >\n {LANGUAGE_CODES.map((code, index) => {\n const isSelected = code === selectedLanguage;\n const isFocused = index === focusedIndex;\n return (\n <DropdownItem\n key={code}\n ref={(el: HTMLLIElement | null) => {\n itemRefs.current[index] = el;\n }}\n role=\"option\"\n lang={code}\n className={clsx(\n listItem,\n isFocused &&\n isSelected &&\n listItemActiveSelected,\n isFocused && !isSelected && listItemActive\n )}\n aria-selected={isSelected}\n tabIndex={isFocused ? 0 : -1}\n $selected={isSelected}\n onClick={() => handleItemSelect(code)}\n data-testid={`${testId}--item-${code}`}\n >\n {isSelected ? (\n <TickIcon\n className={clsx(\n baseIndicatorStyle,\n selectedIndicator\n )}\n aria-hidden\n />\n ) : (\n <div className={baseIndicatorStyle} />\n )}\n {LANGUAGE_DISPLAY_MAP[code]}\n </DropdownItem>\n );\n })}\n </DropdownList>\n </DropdownPanel>\n );\n\n // =========================================================================\n // RENDER\n // =========================================================================\n return (\n <div data-testid={testId} {...otherProps}>\n <ElementWithDropdown\n enabled={true}\n isOpen={isOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n />\n </div>\n );\n};\n"],"names":["DropdownVariant","_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","triggerRef","useRef","itemRefs","listboxId","useId","useEffect","selectedIdx","LANGUAGE_CODES","indexOf","idx","setTimeout","current","focus","handleItemSelect","code","handleListKeyDown","event","key","preventDefault","next","Math","min","length","prev","max","_b","_c","last","_d","_jsx","children","ElementWithDropdown","enabled","renderElement","_jsxs","StyledExpandableElement","ref","disabled","expanded","popupRole","readOnly","ARIA_LABEL","LANGUAGE_DISPLAY_MAP","LanguageIconWrapper","LanguageIcon","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","DropdownPanel","Object","assign","style","width","DropdownList","role","id","onKeyDown","map","index","isSelected","isFocused","DropdownItem","el","lang","className","clsx","listItem","listItemActiveSelected","listItemActive","tabIndex","$selected","onClick","TickIcon","baseIndicatorStyle","selectedIndicator","onOpen","onClose","onDismiss","clickToToggle","offset"],"mappings":"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"}

package/language-switcher/dropdown-variant.style.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { baseIndicatorStyle, selectedIndicator } from "../shared/dropdown-list/dropdown-list.styles";
+export declare const StyledExpandableElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/dropdown-list").ExpandableElementProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../shared/dropdown-list").ExpandableElementProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("../shared/dropdown-list").ExpandableElementProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const LanguageIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const DropdownPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const DropdownList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
+export { baseIndicatorStyle, selectedIndicator };
+export declare const DropdownItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$selected"> & {
+    $selected: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$selected"> & {
+    $selected: boolean;
+}, never>>> & string;

package/language-switcher/dropdown-variant.style.js ADDED Viewed

@@ -0,0 +1,62 @@
+import r,{css as e}from"styled-components";import"react/jsx-runtime";import"clsx";import"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import{Border as o}from"../theme/tokens/border.js";import{Colour as t}from"../theme/tokens/colour.js";import{Font as s}from"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as i}from"../theme/tokens/radius.js";import{Spacing as d}from"../theme/tokens/spacing.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import"../shared/dropdown-list/dropdown-list.js";import"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as a}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../_virtual/_tslib.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1qveyb9.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{iconContainer as n}from"../shared/dropdown-list/expandable-element.styles.js";const p=r(a)`
+    min-width: 9rem;
+    width: auto;
+    ${s["body-md-semibold"]}
+    color: ${t["text-primary"]};
+    height: 2.5rem;
+    padding: 0 ${d["spacing-16"]};
+    border-radius: ${i.sm};
+    border: ${o["width-010"]} ${o.solid} ${t.border};
+    background: ${t.bg};
+    .${n} {
+        margin-left: auto;
+        svg {
+            color: ${t["text-selected"]};
+        }
+    }
+    &:focus-visible {
+        outline: 2px solid ${t["focus-ring"]};
+        outline-offset: -2px;
+    }
+`,m=e`
+    display: flex;
+    align-items: center;
+    svg {
+        height: 1rem;
+        width: 1rem;
+    }
+`,l=r.span`
+    ${m}
+    color: ${t["icon-primary"]};
+`,c=r.div`
+    border-radius: ${i.sm};
+    border: ${o["width-010"]} ${o.solid} ${t.border};
+    background: ${t.bg};
+    overflow: hidden;
+`,h=r.ul`
+    list-style: none;
+    margin: 0;
+    padding: ${d["spacing-8"]};
+`,g=r.li`
+    align-items: center;
+    ${s["body-md-regular"]}
+    color: ${t.text};
+    &:hover {
+        background: ${t["bg-hover-subtle"]};
+    }
+    ${r=>r.$selected&&e`
+            background: transparent;
+            color: ${t["text-selected"]};
+            &:hover {
+                background: ${t["bg-hover"]};
+            }
+        `}
+`;export{g as DropdownItem,h as DropdownList,c as DropdownPanel,l as LanguageIconWrapper,p as StyledExpandableElement};
+//# sourceMappingURL=dropdown-variant.style.js.map

package/language-switcher/dropdown-variant.style.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown-variant.style.js","sources":["../../src/language-switcher/dropdown-variant.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ExpandableElement } from \"../shared/dropdown-list\";\nimport {\n baseIndicatorStyle,\n selectedIndicator,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\nimport { iconContainer } from \"../shared/dropdown-list/expandable-element.styles\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// TRIGGER STYLES\n// =============================================================================\nexport const StyledExpandableElement = styled(ExpandableElement)`\n min-width: 9rem;\n width: auto;\n ${Font[\"body-md-semibold\"]}\n color: ${Colour[\"text-primary\"]};\n height: 2.5rem;\n padding: 0 ${Spacing[\"spacing-16\"]};\n border-radius: ${Radius[\"sm\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n background: ${Colour[\"bg\"]};\n\n .${iconContainer} {\n margin-left: auto;\n\n svg {\n color: ${Colour[\"text-selected\"]};\n }\n }\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: -2px;\n }\n`;\n\nconst IconWrapper = css`\n display: flex;\n align-items: center;\n\n svg {\n height: 1rem;\n width: 1rem;\n }\n`;\n\nexport const LanguageIconWrapper = styled.span`\n ${IconWrapper}\n color: ${Colour[\"icon-primary\"]};\n`;\n\n// =============================================================================\n// DROPDOWN STYLES\n// =============================================================================\nexport const DropdownPanel = styled.div`\n border-radius: ${Radius[\"sm\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n background: ${Colour[\"bg\"]};\n overflow: hidden;\n`;\n\nexport const DropdownList = styled.ul`\n list-style: none;\n margin: 0;\n padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport { baseIndicatorStyle, selectedIndicator };\n\nexport const DropdownItem = styled.li<{ $selected: boolean }>`\n align-items: center;\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n &:hover {\n background: ${Colour[\"bg-hover-subtle\"]};\n }\n\n ${(props) =>\n props.$selected &&\n css`\n background: transparent;\n color: ${Colour[\"text-selected\"]};\n\n &:hover {\n background: ${Colour[\"bg-hover\"]};\n }\n `}\n`;\n"],"names":["StyledExpandableElement","styled","ExpandableElement","Font","Colour","Spacing","Radius","Border","iconContainer","IconWrapper","css","LanguageIconWrapper","span","DropdownPanel","div","DropdownList","ul","DropdownItem","li","props","$selected"],"mappings":"inEAaaA,EAA0BC,EAAOC,EAAkB;;;MAG1DC,EAAK;aACEC,EAAO;;iBAEHC,EAAQ;qBACJC,EAAW;cAClBC,EAAO,gBAAgBA,EAAc,SAAKH,EAAe;kBACrDA,EAAW;;OAEtBI;;;;qBAIcJ,EAAO;;;;;6BAKCA,EAAO;;;EAK9BK,EAAcC,CAAG;;;;;;;;EAUVC,EAAsBV,EAAOW,IAAI;MACxCH;aACOL,EAAO;EAMPS,EAAgBZ,EAAOa,GAAG;qBAClBR,EAAW;cAClBC,EAAO,gBAAgBA,EAAc,SAAKH,EAAe;kBACrDA,EAAW;;EAIhBW,EAAed,EAAOe,EAAE;;;eAGtBX,EAAQ;EAKVY,EAAehB,EAAOiB,EAA0B;;MAEvDf,EAAK;aACEC,EAAa;;;sBAGJA,EAAO;;;MAGtBe,GACCA,EAAMC,WACNV,CAAG;;qBAEUN,EAAO;;;8BAGEA,EAAO;;;"}

package/language-switcher/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./language-switcher";
2	+ export * from "./types";

package/language-switcher/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export{LanguageSwitcher}from"./language-switcher.js";
2	+ //# sourceMappingURL=index.js.map

package/language-switcher/internal-types.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type React from "react";
+import type { LanguageSwitcherCode } from "./types";
+export interface VariantInternalProps extends React.HTMLAttributes<HTMLDivElement> {
+    selectedLanguage: LanguageSwitcherCode;
+    onSelectLanguage: (code: LanguageSwitcherCode) => void;
+    testId: string;
+}

package/language-switcher/language-switcher.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { LanguageSwitcherProps } from "./types";
2	+ export declare const LanguageSwitcher: ({ variant, selectedLanguage, onSelectLanguage, "data-testid": testId, ...otherProps }: LanguageSwitcherProps) => JSX.Element;

package/language-switcher/language-switcher.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{announce as a}from"@react-aria/live-announcer";import{LANGUAGE_DISPLAY_MAP as n}from"./data.js";import{DropdownVariant as r}from"./dropdown-variant.js";import{LinkContainerVariant as o}from"./link-container-variant.js";const i=i=>{var{variant:s="dropdown",selectedLanguage:c="en",onSelectLanguage:g,"data-testid":d="language-switcher"}=i,l=e(i,["variant","selectedLanguage","onSelectLanguage","data-testid"]);const u=e=>{e!==c&&g&&(g(e),a(`${n[e]} selected`,"polite"))};switch(s){case"dropdown":return t(r,Object.assign({selectedLanguage:c,onSelectLanguage:u,testId:d},l));case"link-container":return t(o,Object.assign({selectedLanguage:c,onSelectLanguage:u,testId:d},l))}};export{i as LanguageSwitcher};
2	+ //# sourceMappingURL=language-switcher.js.map

package/language-switcher/language-switcher.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"language-switcher.js","sources":["../../src/language-switcher/language-switcher.tsx"],"sourcesContent":["import { announce } from \"@react-aria/live-announcer\";\n\nimport { LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { DropdownVariant } from \"./dropdown-variant\";\nimport { LinkContainerVariant } from \"./link-container-variant\";\nimport type { LanguageSwitcherCode, LanguageSwitcherProps } from \"./types\";\n\nexport const LanguageSwitcher = ({\n variant = \"dropdown\",\n selectedLanguage = \"en\",\n onSelectLanguage,\n \"data-testid\": testId = \"language-switcher\",\n ...otherProps\n}: LanguageSwitcherProps): JSX.Element => {\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSelectLanguage = (code: LanguageSwitcherCode) => {\n if (code !== selectedLanguage && onSelectLanguage) {\n onSelectLanguage(code);\n announce(`${LANGUAGE_DISPLAY_MAP[code]} selected`, \"polite\");\n }\n };\n\n // =========================================================================\n // RENDER\n // =========================================================================\n switch (variant) {\n case \"dropdown\":\n return (\n <DropdownVariant\n selectedLanguage={selectedLanguage}\n onSelectLanguage={handleSelectLanguage}\n testId={testId}\n {...otherProps}\n />\n );\n case \"link-container\":\n return (\n <LinkContainerVariant\n selectedLanguage={selectedLanguage}\n onSelectLanguage={handleSelectLanguage}\n testId={testId}\n {...otherProps}\n />\n );\n }\n};\n"],"names":["LanguageSwitcher","_a","variant","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","handleSelectLanguage","code","announce","LANGUAGE_DISPLAY_MAP","_jsx","DropdownVariant","LinkContainerVariant"],"mappings":"yTAOO,MAAMA,EAAoBC,QAAAC,QAC7BA,EAAU,WAAUC,iBACpBA,EAAmB,KAAIC,iBACvBA,EACA,cAAeC,EAAS,qBAAmBJ,EACxCK,EAAUC,EAAAN,EALgB,iEAU7B,MAAMO,EAAwBC,IACtBA,IAASN,GAAoBC,IAC7BA,EAAiBK,GACjBC,EAAS,GAAGC,EAAqBF,cAAkB,UACvD,EAMJ,OAAQP,GACJ,IAAK,WACD,OACIU,EAACC,iBACGV,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC,IAGhB,IAAK,iBACD,OACIM,EAACE,iBACGX,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC"}

package/language-switcher/link-container-variant.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { VariantInternalProps } from "./internal-types";
2	+ export declare const LinkContainerVariant: ({ selectedLanguage, onSelectLanguage, testId, ...otherProps }: VariantInternalProps) => JSX.Element;

package/language-switcher/link-container-variant.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useRef as r}from"react";import{ARIA_LABEL as a,LANGUAGE_CODES as n,LANGUAGE_DISPLAY_MAP as o}from"./data.js";import{LinkContainerWrapper as c,LinkList as l,LinkListItem as s,LinkItem as i}from"./link-container-variant.style.js";const u=u=>{var{selectedLanguage:d,onSelectLanguage:m,testId:p}=u,g=e(u,["selectedLanguage","onSelectLanguage","testId"]);const f=r([]);return t(c,Object.assign({"data-testid":p},g,{children:t(l,{role:"group","aria-label":a,children:n.map(((e,r)=>{const a=e===d;return t(s,{children:t(i,{ref:e=>{f.current[r]=e},type:"button",lang:e,$active:a,"aria-pressed":a,tabIndex:a?0:-1,onClick:()=>m(e),onKeyDown:e=>((e,t)=>{var r;let a=null;switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault(),a=Math.min(t+1,n.length-1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault(),a=Math.max(t-1,0);break;case"Enter":case" ":{e.preventDefault();const r=n[t];m(r);break}}null!==a&&(null===(r=f.current[a])\|\|void 0===r\|\|r.focus())})(e,r),"data-testid":`${p}--item-${e}`,children:o[e]})},e)}))})}))};export{u as LinkContainerVariant};
2	+ //# sourceMappingURL=link-container-variant.js.map

package/language-switcher/link-container-variant.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"link-container-variant.js","sources":["../../src/language-switcher/link-container-variant.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport {\n LinkContainerWrapper,\n LinkItem,\n LinkList,\n LinkListItem,\n} from \"./link-container-variant.style\";\n\nexport const LinkContainerVariant = ({\n selectedLanguage,\n onSelectLanguage,\n testId,\n ...otherProps\n}: VariantInternalProps): JSX.Element => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n let nextIndex: number | null = null;\n\n switch (event.key) {\n case \"ArrowRight\":\n case \"ArrowDown\": {\n event.preventDefault();\n nextIndex = Math.min(index + 1, LANGUAGE_CODES.length - 1);\n break;\n }\n case \"ArrowLeft\":\n case \"ArrowUp\": {\n event.preventDefault();\n nextIndex = Math.max(index - 1, 0);\n break;\n }\n case \"Enter\":\n case \" \": {\n event.preventDefault();\n const code = LANGUAGE_CODES[index];\n onSelectLanguage(code);\n break;\n }\n }\n\n if (nextIndex !== null) {\n itemRefs.current[nextIndex]?.focus();\n }\n };\n\n // =========================================================================\n // RENDER\n // =========================================================================\n return (\n <LinkContainerWrapper data-testid={testId} {...otherProps}>\n <LinkList role=\"group\" aria-label={ARIA_LABEL}>\n {LANGUAGE_CODES.map((code, index) => {\n const isActive = code === selectedLanguage;\n return (\n <LinkListItem key={code}>\n <LinkItem\n ref={(el) => {\n itemRefs.current[index] = el;\n }}\n type=\"button\"\n lang={code}\n $active={isActive}\n aria-pressed={isActive}\n tabIndex={isActive ? 0 : -1}\n onClick={() => onSelectLanguage(code)}\n onKeyDown={(e) => handleKeyDown(e, index)}\n data-testid={`${testId}--item-${code}`}\n >\n {LANGUAGE_DISPLAY_MAP[code]}\n </LinkItem>\n </LinkListItem>\n );\n })}\n </LinkList>\n </LinkContainerWrapper>\n );\n};\n"],"names":["LinkContainerVariant","_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","itemRefs","useRef","_jsx","LinkContainerWrapper","Object","assign","children","LinkList","role","ARIA_LABEL","LANGUAGE_CODES","map","code","index","isActive","LinkListItem","LinkItem","ref","el","current","type","lang","$active","tabIndex","onClick","onKeyDown","e","event","nextIndex","key","preventDefault","Math","min","length","max","focus","handleKeyDown","LANGUAGE_DISPLAY_MAP"],"mappings":"kUAYO,MAAMA,EAAwBC,QAAAC,iBACjCA,EAAgBC,iBAChBA,EAAgBC,OAChBA,KACGC,EAAUC,EAAAL,EAJoB,CAAA,mBAAA,mBAAA,WASjC,MAAMM,EAAWC,EAAqC,IAsCtD,OACIC,EAACC,EAAoBC,OAAAC,OAAA,CAAA,cAAcR,GAAYC,EAAU,CAAAQ,SACrDJ,EAACK,EAAQ,CAACC,KAAK,QAAO,aAAaC,EAAUH,SACxCI,EAAeC,KAAI,CAACC,EAAMC,KACvB,MAAMC,EAAWF,IAASjB,EAC1B,OACIO,EAACa,EAAY,CAAAT,SACTJ,EAACc,EAAQ,CACLC,IAAMC,IACFlB,EAASmB,QAAQN,GAASK,CAAE,EAEhCE,KAAK,SACLC,KAAMT,EAAIU,QACDR,EAAQ,eACHA,EACdS,SAAUT,EAAW,GAAI,EACzBU,QAAS,IAAM5B,EAAiBgB,GAChCa,UAAYC,GAlDlB,EAACC,EAA4Bd,WAC/C,IAAIe,EAA2B,KAE/B,OAAQD,EAAME,KACV,IAAK,aACL,IAAK,YACDF,EAAMG,iBACNF,EAAYG,KAAKC,IAAInB,EAAQ,EAAGH,EAAeuB,OAAS,GACxD,MAEJ,IAAK,YACL,IAAK,UACDN,EAAMG,iBACNF,EAAYG,KAAKG,IAAIrB,EAAQ,EAAG,GAChC,MAEJ,IAAK,QACL,IAAK,IAAK,CACNc,EAAMG,iBACN,MAAMlB,EAAOF,EAAeG,GAC5BjB,EAAiBgB,GACjB,KACJ,EAGc,OAAdgB,IAC2B,QAA3BlC,EAAAM,EAASmB,QAAQS,UAAU,IAAAlC,GAAAA,EAAEyC,QACjC,EAuB0CC,CAAcV,EAAGb,GAAM,cAC5B,GAAGhB,WAAgBe,aAE/ByB,EAAqBzB,MAdXA,EAgBJ,QAIR"}

package/language-switcher/link-container-variant.style.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+interface LinkItemStyleProps {
+    $active?: boolean;
+}
+export declare const LinkContainerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const LinkList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
+export declare const LinkListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>> & string;
+export declare const LinkItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$active"> & LinkItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$active"> & LinkItemStyleProps, never>>> & string;
+export {};

package/language-switcher/link-container-variant.style.js ADDED Viewed

@@ -0,0 +1,51 @@
+import e,{css as t}from"styled-components";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import{Border as r}from"../theme/tokens/border.js";import{Colour as o}from"../theme/tokens/colour.js";import{Font as i}from"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Motion as n}from"../theme/tokens/motion.js";import{Radius as s}from"../theme/tokens/radius.js";import{Spacing as m}from"../theme/tokens/spacing.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";const a=e.div`
+    display: inline-flex;
+    padding: ${m["spacing-8"]} ${m["spacing-16"]};
+    align-items: center;
+    border-radius: ${s.sm};
+    border: ${r["width-010"]} ${r.solid} ${o.border};
+    background: ${o.bg};
+`,l=e.ul`
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    gap: 0 ${m["spacing-8"]};
+    flex-wrap: wrap;
+`,d=e.li`
+    display: flex;
+    align-items: center;
+`,p=e.button`
+    display: flex;
+    padding: 0.25rem 0.5rem;
+    justify-content: center;
+    align-items: center;
+    gap: 0.625rem;
+    border: none;
+    border-radius: ${s.md};
+    ${i["body-md-semibold"]}
+    color: ${o["text-subtler"]};
+    text-align: center;
+    transition: color ${n["duration-150"]} ${n["ease-default"]};
+    ${({$active:e})=>e?t`
+                  background: ${o["bg-primary-subtler"]};
+                  color: ${o["text-selected"]};
+                  cursor: default;
+              `:t`
+                  background: none;
+                  cursor: pointer;
+                  &:hover {
+                      color: ${o["text-hover"]};
+                      text-decoration: underline;
+                  }
+              `}
+    &:focus-visible {
+        outline: 2px solid ${o["focus-ring"]};
+        outline-offset: -2px;
+    }
+`;export{a as LinkContainerWrapper,p as LinkItem,l as LinkList,d as LinkListItem};
+//# sourceMappingURL=link-container-variant.style.js.map

package/language-switcher/link-container-variant.style.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"link-container-variant.style.js","sources":["../../src/language-switcher/link-container-variant.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface LinkItemStyleProps {\n $active?: boolean;\n}\n\n// =============================================================================\n// LINK CONTAINER STYLES\n// =============================================================================\nexport const LinkContainerWrapper = styled.div`\n display: inline-flex;\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n align-items: center;\n border-radius: ${Radius[\"sm\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n background: ${Colour[\"bg\"]};\n`;\n\nexport const LinkList = styled.ul`\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n align-items: center;\n gap: 0 ${Spacing[\"spacing-8\"]};\n flex-wrap: wrap;\n`;\n\nexport const LinkListItem = styled.li`\n display: flex;\n align-items: center;\n`;\n\nexport const LinkItem = styled.button<LinkItemStyleProps>`\n display: flex;\n padding: 0.25rem 0.5rem;\n justify-content: center;\n align-items: center;\n gap: 0.625rem;\n border: none;\n border-radius: ${Radius[\"md\"]};\n ${Font[\"body-md-semibold\"]}\n color: ${Colour[\"text-subtler\"]};\n text-align: center;\n transition: color ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n\n ${({ $active }) =>\n $active\n ? css`\n background: ${Colour[\"bg-primary-subtler\"]};\n color: ${Colour[\"text-selected\"]};\n cursor: default;\n `\n : css`\n background: none;\n cursor: pointer;\n\n &:hover {\n color: ${Colour[\"text-hover\"]};\n text-decoration: underline;\n }\n `}\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: -2px;\n }\n`;\n"],"names":["LinkContainerWrapper","styled","div","Spacing","Radius","Border","Colour","LinkList","ul","LinkListItem","li","LinkItem","button","Font","Motion","$active","css"],"mappings":"ypBAcO,MAAMA,EAAuBC,EAAOC,GAAG;;eAE/BC,EAAQ,gBAAgBA,EAAQ;;qBAE1BC,EAAW;cAClBC,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;kBACrDA,EAAW;EAGhBC,EAAWN,EAAOO,EAAE;;;;;;aAMpBL,EAAQ;;EAIRM,EAAeR,EAAOS,EAAE;;;EAKxBC,EAAWV,EAAOW,MAA0B;;;;;;;qBAOpCR,EAAW;MAC1BS,EAAK;aACEP,EAAO;;wBAEIQ,EAAO,mBAAmBA,EAAO;;MAEnD,EAAGC,aACDA,EACMC,CAAG;gCACeV,EAAO;2BACZA,EAAO;;gBAGpBU,CAAG;;;;;+BAKcV,EAAO;;;;;;6BAMTA,EAAO;;;"}

package/language-switcher/types.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type React from "react";
+export type LanguageSwitcherCode = "en" | "zh" | "ms" | "ta";
+export type LanguageSwitcherVariant = "dropdown" | "link-container";
+export interface LanguageSwitcherProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: LanguageSwitcherVariant | undefined;
+    selectedLanguage?: LanguageSwitcherCode | undefined;
+    onSelectLanguage?: ((language: LanguageSwitcherCode) => void) | undefined;
+    "data-testid"?: string | undefined;
+}

package/layout/col-div.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as s}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import r,{useContext as a}from"react";import{ThemeContext as o}from"styled-components";import{V3_BreakpointValues as n}from"../v3_theme/breakpoint/theme-helper.js";import{StyledDiv as e}from"./col-div.style.js";const m=r.forwardRef(((r,m)=>{const l=a(o),{xxlCols:x,xlCols:p,lgCols:i,mdCols:c,smCols:$,xsCols:u,xxsCols:C}=r,d=s(r,["xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols"]),S=(s,t,r)=>{if(!s)return{start:void 0,span:void 0};if("development"===process.env.NODE_ENV&&("number"==typeof s&&s>t?console.warn(`Warning: ${r}Cols exceeds maximum (${t}): ${s}`):Array.isArray(s)&&(s[0]>t+1||s[1]>t+1)&&console.warn(`Warning: ${r}Cols array exceeds maximum (${t}): [${s[0]}, ${s[1]}]`)),Array.isArray(s)){const[r,a]=s;if(-1===a)return{start:r,span:t-r+1};return{start:r,span:Math.min(a-r,t)}}return{start:void 0,span:Math.min(s,t)}};return t(e,Object.assign({ref:m},(()=>{const s=n["xxl-column"]({theme:l}),t=n["xl-column"]({theme:l}),r=n["lg-column"]({theme:l}),a=n["md-column"]({theme:l}),o=n["sm-column"]({theme:l}),e=n["xs-column"]({theme:l}),m=n["xxs-column"]({theme:l}),d=S(x||p||i||c||$||u||C,s,"xxl"),f=S(p||i||c||$||u||C,t,"xl"),h=S(i||c||$||u||C,r,"lg"),g=S(c||$||u||C,a,"md"),v=S($||u||C,o,"sm"),y=S(u||C,e,"xs"),j=S(C,m,"xxs");return{$xxlStart:d.start,$xxlSpan:d.span,$xlStart:f.start,$xlSpan:f.span,$lgStart:h.start,$lgSpan:h.span,$mdStart:g.start,$mdSpan:g.span,$smStart:v.start,$smSpan:v.span,$xsStart:y.start,$xsSpan:y.span,$xxsStart:j.start,$xxsSpan:j.span}})(),d))}));export{m as ColDiv};
+import{__rest as s}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import r from"clsx";import e,{useRef as n}from"react";import"../theme/theme-provider/index.js";import{parseCSSVariableValue as o}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as l}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as a}from"../theme/utils/use-apply-styles.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as m}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{colDiv as i,tokens as x}from"./col-div.styles.js";const p={xxs:{start:x.xxsStart,span:x.xxsSpan,end:x.xxsEnd},xs:{start:x.xsStart,span:x.xsSpan,end:x.xsEnd},sm:{start:x.smStart,span:x.smSpan,end:x.smEnd},md:{start:x.mdStart,span:x.mdSpan,end:x.mdEnd},lg:{start:x.lgStart,span:x.lgSpan,end:x.lgEnd},xl:{start:x.xlStart,span:x.xlSpan,end:x.xlEnd},xxl:{start:x.xxlStart,span:x.xxlSpan,end:x.xxlEnd}},d=s=>{var t,r;const e=o(s,null!==(r=null===(t=globalThis.document)||void 0===t?void 0:t.documentElement)&&void 0!==r?r:null),n=parseInt(e,10);return Number.isNaN(n)?1/0:n},u=e.forwardRef(((e,o)=>{const{xxlCols:x,xlCols:u,lgCols:c,mdCols:f,smCols:j,xsCols:v,xxsCols:g,className:h}=e,S=s(e,["xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className"]),C=n(null),E=m(C,o),b=(s,t)=>{if(!s)return{start:void 0,span:void 0,end:void 0};if(Array.isArray(s)){const[r,e]=s;if(-1===e)return{start:r,span:void 0,end:-1};const n=d(t);return{start:r,span:Math.min(e-r,n),end:void 0}}const r=d(t);return{start:void 0,span:Math.min(s,r),end:void 0}};return a(C,Object.assign({},(()=>{const s=b(g,l["xxs-column"]),t=b(v||g,l["xs-column"]),r=b(j||v||g,l["sm-column"]),e=b(f||j||v||g,l["md-column"]),n=b(c||f||j||v||g,l["lg-column"]),o=b(u||c||f||j||v||g,l["xl-column"]),a=b(x||u||c||f||j||v||g,l["xxl-column"]),m={};return[{result:s,prefix:"xxs"},{result:t,prefix:"xs"},{result:r,prefix:"sm"},{result:e,prefix:"md"},{result:n,prefix:"lg"},{result:o,prefix:"xl"},{result:a,prefix:"xxl"}].forEach((({result:s,prefix:t})=>{const r=p[t];s.start&&(m[r.start]=String(s.start)),s.span&&(m[r.span]=String(s.span)),s.end&&(m[r.end]=String(s.end))})),m})())),t("div",Object.assign({ref:E,className:r(i,h)},S))}));export{u as ColDiv};
 //# sourceMappingURL=col-div.js.map